Acabo de comenzar a aprender Vue 3 y estoy tratando de crear un componente Vue que está vinculado a una matriz de JavaScript ** (definida y modificada fuera de Vue) ** y usa esa matriz para representar una lista v-for de Vue infantil componentes
En el código a continuación, tengo mi componente Vue " layer-container " que tiene una plantilla que representa una lista de subcomponentes " layer-item " utilizando datos de una matriz JavaScript layersGlobal . Si lo ejecuta, puede ver que los elementos se representan correctamente a partir de los datos iniciales en la matriz, pero cuando la matriz se actualiza (después de 1 segundo, a través de una llamada push() en setInterval() ), la lista no se vuelve a representar. y el DOM no está actualizado.
<html> <body> <div id="layers"> <layer-container /> </div> <script src="https://unpkg.com/vue@3"></script> <script> var layersGlobal = [ {name: "Layer A"}, {name: "Layer B"} ]; let app = Vue.createApp({ data: function() { return {} }, methods: {} }); app.component("layer-container", { template: ` <div class="layer-container text-light"> <layer-item v-for="layer in layers" v-bind:name="layer.name" v-bind:key="layer.name"></layer-item> </div> `, components: ["layer-item"], data: function() { return { layers: layersGlobal } }, }); app.component("layer-item", { template: ` <div class="layer-item"> <span>{{ name }}</span> </div> `, props: ["name"] }); app.mount("#layers"); setTimeout(() => { layersGlobal.push({name: "Layer C"}); console.log("Layers:", layersGlobal); }, 1000); </script> </body> </html>¿Estoy haciendo algo mal o estoy malinterpretando cómo Vue reacciona con las matrices? ¿Es posible vincular una matriz de JavaScript declarada fuera de Vue a un componente de Vue como este, o puedo/debería hacerlo de otra manera?
Busqué una solución y encontré un código de ejemplo que funciona en Vue 2, pero no en Vue 3.
Los datos reactivos deben actualizarse dentro del contexto del componente. Probablemente desee llamar a setTimeout dentro de la definición del componente y actualizar la variable reactiva this.layers en lugar de la matriz global.
app.component("layer-container", { /* ... */ data: function () { return { layers: layersGlobal } }, mounted() { setTimeout(() => this.layers.push({ name: "Layer C" }), 1000) } }) Alternativamente, si necesita actualizar los datos desde fuera del componente, debe definir explícitamente su matriz global como un objeto reactivo , utilizando la función ref() .
const layersGlobal = Vue.ref([ /* ... */ ]) setTimeout(() => layersGlobal.value.push({ name: "Layer C" }), 1000) Tenga en cuenta la propiedad .value que se utiliza para acceder al objeto real.