问题
First off, please excuse the awful code (we don't have time to fix right now). I know eval
is horrible, but for our purposes it was the only thing that worked for us this easily.
This is how we add and remove the rows:
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
To recreate the issue, add a row. Then, change the text on the new row. Try removing the second-to-last row - notice how it doesn't get deleted, but the last one is. However, if you check the json-debug which is a live view of the backend data, you'll see that the proper row gets deleted!
Why does this happen? Why are the UI and the backend not in sync?
回答1:
You should always use a key when iterating with v-for
. Try adding one like this.
<div class = "well" v-for = "item, index in items" :key="item">
来源:https://stackoverflow.com/questions/44035837/undefined-behavior-with-v-for-and-custom-components