Неопределенное поведение с v-for и пользовательскими компонентами

Во-первых, извините за ужасный код (сейчас у нас нет времени исправлять). Я знаю, что 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, который представляет собой живое представление серверных данных, вы увидите, что правильная строка удаляется!

Почему это происходит? Почему пользовательский интерфейс и серверная часть не синхронизированы?


javascript vue.js components row v-for
person Steef0w    schedule 17.05.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы всегда должны использовать ключ при повторении с v-for. Попробуйте добавить такой.

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