es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Por qué no funciona v-model de Vue para una propiedad de arreglo?

03 Jun, 2023 Programación

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é?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    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 un watch para la propiedad modelValue en el componente hijo y actualizar el estado local en consecuencia.

    TestComponent.vue

    <template>
  <div>
     <button @click="updateIt">Test</button>
  </div>
</template>

<script>
export default {
    props: {
       modelValue: Array
    },
    emits: ["update:modelValue"],
    setup(props, {emit}){

        // añadir un watch para la propiedad modelValue
        watch(() => props.modelValue, (val) => {
            // actualizar el estado local con el nuevo valor
            myArr.value = val;
        });

        // configurar un estado reactivo para el array
        const myArr = ref(props.modelValue);

        return {
            myArr,
            updateIt(){
                emit("update:modelValue", [4,5,6])
            }
        }
    }
}
</script>

    Ahora, cuando se emite el evento update:modelValue, el componente hijo actualizará su estado myArr con el valor proporcionado, y como ese estado está vinculado al bucle v-for en el componente padre, la lista se actualizará en consecuencia.

Comments are closed.