未定义V-​​for和自定义组件的行为

Question

首先，请原谅糟糕的代码（我们现在没有时间修复）。我知道eval是可怕的，但对我们的目的来说，这是唯一能够轻松为我们工作的东西。

这就是我们如何添加和删除行：

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

要重现该问题，添加一行。然后，更改新行上的文本。尝试删除倒数第二行 - 注意它如何不被删除，但最后一行是。但是，如果您检查json-debug是后端数据的实时视图，则会看到正确的行被删除！

为什么会发生这种情况？为什么用户界面和后台不同步？

Answer 1

与v-for重复时，应始终使用key。尝试添加一个这样的。

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