Estoy usando items de un objeto para mostrar una lista de entradas con v-for .
items se actualiza cuando el componente se mounted , pero solo muestra dos entradas al principio.
La tercera entrada se mostrará después de hacer clic en el botón o escribir la entrada. Pero el valor de los items no se actualiza cuando cambia la tercera entrada .
Me preguntaba
window.onload = () => { new Vue({ el: '#app', data() { return { show: true, items: { peter: { name: 'Peter', value: '' }, kitty: { name: 'Kitty', value: '' } }, } }, watch: { show(newVal) { console.log('Alert is now ' + (newVal ? 'visible' : 'hidden')) } }, mounted() { this.items.test = { name: 'Test', value: '' } }, methods: { toggle() { console.log('Toggle button clicked') this.show = !this.show }, } }) } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div> <button @click="toggle"> {{ show ? 'Hide' : 'Show' }} Alert </button> <div v-if="show"> Hello! </div> <div v-for="(item,index) in items" :key="index"> <label>{{item.name}}:</label> <input type="text" name="item.name" v-model="items[index].value" /> </div> <div>{{items}}</div> </div> </div>La documentación de Vue describe este caso.
Vue no permite agregar dinámicamente nuevas propiedades reactivas de nivel raíz a una instancia ya creada. Sin embargo, es posible agregar propiedades reactivas a un objeto anidado usando el método Vue.set(object, propertyName, value):
También puede usar el método de instancia vm.$set, que es un alias para el Vue.set global:
https://v2.vuejs.org/v2/guide/reactividad.html#Para-Objetos
window.onload = () => { new Vue({ el: '#app', data() { return { show: true, items: { peter: { name: 'Peter', value: '' }, kitty: { name: 'Kitty', value: '' } }, } }, watch: { show(newVal) { console.log('Alert is now ' + (newVal ? 'visible' : 'hidden')) } }, mounted() { this.$set(this.items, 'test', { name: 'Test', value: '' }) /* this.items.test = { name: 'Test', value: '' } */ }, methods: { toggle() { console.log('Toggle button clicked') this.show = !this.show }, } }) } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div> <button @click="toggle"> {{ show ? 'Hide' : 'Show' }} Alert </button> <div v-if="show"> Hello! </div> <div v-for="(item,index) in items" :key="index"> <label>{{item.name}}:</label> <input type="text" name="item.name" v-model="items[index].value" /> </div> <div>{{items}}</div> </div> </div>Vue tiene una forma diferente de seguimiento cuando se trata de actualizar la interfaz de usuario
Vue usa getters/setters en el objeto de datos para el seguimiento de mutaciones. Cuando ejecuta this.items = [{}, {}, {}, ...]; , pasará por el colocador de mesa. En el setter, hay una función para notificar al observador y agregar estos cambios de datos a una cola.
Vue no puede detectar los siguientes cambios en una matriz:
vm.items[indexOfItem] = newValuevm.items.length = newLengthRespuesta a su pregunta: en consideración de las dos declaraciones anteriores, debe actualizar toda la matriz, incluidas las filas no modificadas.