Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

186
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda