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 >
<div id="color-picker">
<button
v-for="color in colors"
@click="updateActiveColor(color.value)"
:key="color.value"
type="button"
:data-testid="'button-' color.value"
:style="{ backgroundColor: color.color }"
>
<div v-if="selectColor.value === color.value" >
<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>
CodePudding user response:
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 >
<div id="color-picker">
<button
v-for="color in colors"
@click="updateActiveColor(color)"
:key="color.value"
type="button"
:data-testid="'button-' color.value"
:style="{ backgroundColor: color.color }"
>
<div v-if="selectColor.value === color.value" >
✔
</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>