Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

183
Views
v-model no se actualizó dentro de un bucle for-in con iteraciones de objetos dinámicos

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

  1. Por qué el tercer elemento no se mostró al principio. (¿Supongo que Vue no realiza un seguimiento de los cambios de objeto para actualizar la vista?)
  2. Por qué hacer clic en el botón funcionó
  3. Por qué no se actualizó el valor del tercer elemento.

 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>

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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>

about 4 years ago · Juan Pablo Isaza Report

0

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:

  • Cuando configura directamente un elemento con el índice, por ejemplo, vm.items[indexOfItem] = newValue
  • Cuando modifica la longitud de la matriz, por ejemplo, vm.items.length = newLength

Respuesta a su pregunta: en consideración de las dos declaraciones anteriores, debe actualizar toda la matriz, incluidas las filas no modificadas.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!