I have a component named ChooseColor.vue that requires an array of color options for the selection input. The parent component where this ChooseColor component is included holds the user's information, specifically the favorite color property. How can I establish a binding for this in Vue?
UserSelection.vue
<script setup>
import { ref } from 'vue';
import ChooseColor from './ChooseColor.vue';
const user = ref({
name: '',
favoriteColor: '',
})
const colorOptions = ref(['red', 'green', 'blue', 'white', 'black'])
</script>
<template>
<div class="user-selection-container">
<div class="user-selection">
<p>Favorite Color:</p>
<ChooseColor :colorOptions="colorOptions" />
</div>
</div>
</template>
ChooseColor.vue
<script setup>
defineProps({
selectOptions: Array,
})
</script>
<template>
<select>
<option disabled value="">Please choose one</option>
<option v-for="colorOption in colorOptions" v-bind:key="colorOption">{{ colorOption }}</option>
</select>
</template>