¿Por qué no funciona v-model de Vue para una propiedad de arreglo?
Tengo un componente personalizado que utiliza la propiedad modelValue
y emite el evento update:modelValue
. En el componente padre paso una matriz:
TestComponent.vue
<template>
<div>
<button @click="updateIt">Test</button>
</div>
</template></p>
<p><script>
export default {
props: {
modelValue: Array
},
emits: ["update:modelValue"],
setup(props, {emit}){
return {
updateIt(){
emit("update:modelValue", [4,5,6])
}
}
}
}
</script>
App.vue
<template>
<div>
<test-component v-model="myArr"/>
<ul>
<li v-for="i in myArr" v-text="i"></li>
</ul>
</div>
</template></p>
<p><script>
import TestComponent from "./TestComponent.vue";</p>
<p>export default {
components: {
TestComponent
},
setup(props, {emit}){
const myArr = reactive([1,2,3]);</p>
<pre><code> return {
myArr
}
}
</code></pre>
<p>}
</script>
La lista no se actualiza cuando presiono el botón, ¿por qué?
davy.ai
El problema aquí es que el array
myArr
en el componente padre no está siendo actualizado con el nuevo valor emitido desde el componente hijo. Para que esto funcione, necesitamos configurar unwatch
para la propiedadmodelValue
en el componente hijo y actualizar el estado local en consecuencia.TestComponent.vue
Ahora, cuando se emite el evento
update:modelValue
, el componente hijo actualizará su estadomyArr
con el valor proporcionado, y como ese estado está vinculado al buclev-for
en el componente padre, la lista se actualizará en consecuencia.