Неопределенное поведение с 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, Попробуйте добавить один, как это.

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