javascript - props - Comportamiento no definido con v-for y componentes personalizados

vue emit

Question

En primer lugar, disculpe el horrible código (no tenemos tiempo para arreglarlo en este momento). Sé que eval es horrible, pero para nuestros propósitos fue lo único que nos funcionó tan fácilmente.

Así es como agregamos y eliminamos las filas:

methods: {
addRow: function() {
let lastRow = eval(`this.$parent.json${this.path}[this.$parent.json${this.path}.length - 1]`);
lastRow = Object.assign({}, lastRow);
eval(`this.$parent.json${this.path}.push(lastRow)`);
this.$forceUpdate();
},
removeRow: function(index) {
//eval(`this.$parent.json${this.path}.splice(index, 1)`);
eval(`Vue.delete(this.$parent.json${this.path}, index)`);
this.$forceUpdate();
}

https://jsfiddle.net/00e58as4/10/6

Para volver a crear el problema, agregue una fila. Luego, cambie el texto en la nueva fila. Intente eliminar la penúltima fila: observe cómo no se borra, pero sí la última. Sin embargo, si comprueba json-debug, que es una vista en vivo de los datos de back-end, verá que se elimina la fila correcta.

¿Por qué pasó esto? ¿Por qué la interfaz de usuario y el servidor no están sincronizados?

Answer 1

Siempre debe usar una tecla cuando itere con v-for . Prueba agregar uno como este.

<div class = "well" v-for = "item, index in items" :key="item">