v-if doesn't work when I change to the composition API

Question

I'm new to VueJS and I had some problems when I tried to change my code from vuejs 2 to vuejs3 with composition API. When I tried to change it to the code below, the v-if statement doesn't work when I clicked the color button to change the active button.

 <template> <div class="relative mt-2 mx-2 text-left"> <div class="w-7/12 md:flex md:flex-wrap" id="color-picker"> <button v-for="color in colors" @click="updateActiveColor(color.value)" class="w-8 h-8 mr-2 rounded-full p-2 mt-2" :key="color.value" type="button" :data-testid="'button-' + color.value" :style="{ backgroundColor: color.color }" > <div v-if="selectColor.value === color.value" class="justify-center w-4 p-0 m-auto text-white"> <CheckIcon /> </div> </button> </div> </div> </template>

 <script lang="ts"> export default defineComponent({ props: { colors: { type: Object as() => Array < BaseColorPickerItem > , required: true, }, name: { type: String, required: true, }, selectedColor: { type: Object as() => Prop < BaseColorPickerItem > , require: false, }, }, setup(props, context) { let selectColor = ref(props.colors[0]); const updateActiveColor = (color: any) => { selectColor.value = color; console.dir(selectColor); context.emit('handleSelectColor', selectColor); }; return { selectColor, updateActiveColor, }; }, }); </script>

Answer 1

You can pass the whole color object from template:

...
@click="updateActiveColor(color)"
...

and update it:

...
const updateActiveColor = (color: any) => {
    selectColor.value = color;
    ...

Please take a look at snippet below:

 const { ref } = Vue const app = Vue.createApp({ setup() { const colors = ref([{value: 1, color: 'red'}, {value: 2, color: 'blue'}, {value: 3, color: 'orange'}, {value: 4, color: 'green'}, {value: 5, color: 'yellow'}]) const name = ref('aaa') const selectedColor = ref(null) const setColor = (color) => { selectedColor.value = color } return { selectedColor, colors, name, setColor } } }) app.component('child', { template: ` <div class="relative mt-2 mx-2 text-left"> <div class="w-7/12 md:flex md:flex-wrap" id="color-picker"> <button v-for="color in colors" @click="updateActiveColor(color)" class="w-8 h-8 mr-2 rounded-full p-2 mt-2" :key="color.value" type="button" :data-testid="'button-' + color.value" :style="{ backgroundColor: color.color }" > <div v-if="selectColor.value === color.value" class="justify-center w-4 p-0 m-auto text-white"> &#10004; </div> </button> </div> </div> `, props: { colors: { type: Object , required: true, }, name: { type: String, required: true, }, selectedColor: { type: Object , require: false, }, }, setup(props, context) { let selectColor = ref(props.colors[0]); const updateActiveColor = (color) => { selectColor.value = color; console.log(selectColor.value); context.emit('handleSelectColor', selectColor); }; return { selectColor, updateActiveColor, }; }, }) app.mount('#demo')

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <child :name="name" :selectedColor="selectedColor" :colors="colors" @handle-select-color="setColor"></child> {{selectedColor}} </div>