Si bien este no es el código exacto, representa el problema. Tengo un objeto que tiene un método que devuelve una matriz. Luego, esta matriz se actualiza de forma asíncrona. En la demostración, es un tiempo de espera, pero en realidad sería una llamada HTTP:
function () { let a = ['apple']; setTimeout(() => { a.push['banana']; }, 3000); return a; }Luego se incluye en un componente Vue a través de una propiedad calculada y se muestra, por ejemplo
<ul> <li v-for="(row, index) in testObjectArr" v-bind:key="index"> {{row}} </li> </ul> Sin embargo, esto solo muestra la primera entrada (manzana) y no la segunda (plátano). Si un evento hace que la plantilla se actualice, entonces sí aparece. Usar cosas como watch tampoco funciona. La única forma de hacerlo funcionar es pasar un controlador al objeto que activa manualmente un redibujado que obviamente es menos que ideal. ¿Hay alguna forma de lograr que la capacidad de respuesta funcione realmente con la situación anterior?
Para hacer que las variables sean reactivas, debe declararlas como tales usando ref o reactive . Entonces tu código debería ser:
<script setup> import { ref } from 'vue'; const items = ref(['apple']); setTimeout(() => { items.value.push('banana'); }, 1000); </script> <template> <ul> <li v-for="(item, index) of items" :key="index"> {{ item }} </li> </ul> </template>