0
182
Viewsv-if no funciona cuando cambio a la API de composición
Soy nuevo en VueJS y tuve algunos problemas cuando intenté cambiar mi código de vuejs 2 a vuejs3 con la API de composición. Cuando traté de cambiarlo al siguiente código, la instrucción v-if no funciona cuando hice clic en el botón de color para cambiar el botón activo.
<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 answers
Answer question0
Puede pasar todo el objeto de color desde la plantilla:
... @click="updateActiveColor(color)" ...y actualizarlo:
... const updateActiveColor = (color: any) => { selectColor.value = color; ...Por favor, eche un vistazo al fragmento a continuación:
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
Report
Answer question