0
187
Vistasv-if doesn't work when I change to the composition API
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>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
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">
✔
</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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta