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

Posted 2023-02-23

【中文标题】v-for 和自定义组件的未定义行为

【英文标题】：Undefined Behavior with v-for and custom components

【发布时间】：2017-10-17 13:32:57

【问题描述】：

首先，请原谅糟糕的代码（我们现在没有时间修复）。我知道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，您会看到正确的行被删除了！

为什么会这样？为什么 UI 和后端不同步？

【参考方案1】：

在使用v-for 进行迭代时，您应该始终使用key。尝试像这样添加一个。

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