Вернуть изменения в массив в Vue

Question

Я пытаюсь создать компонент, который может изменить некоторые элементы.В действительности, изменение будет похоже на обмен объекта в данной позиции.Я сделал несколько POC и попытался сделать метод возврата, чтобы иметь возможность оставить все как прежде.

export default {
  name: 'Landing',
  data () {
    return {
      items: [
        {
          id: 1,
          category: 'Something something'
        },
        {
          id: 2,
          category: 'Something something'
        }
      ]
    };
  },
  created() {
    this.originals = this.items.slice(0);
  },
  methods: {
    change() {
      this.items[0].category = 'Changed';
    },
    revert() {
      // ??
    }
  }
};

Я попробовал несколько вещей, особенно после прочтения этого: https://vuejs.org/2016/02/06/common-gotchas/#Why-isn%E2%80%99t-the-DOM-updating

while (this.snacks.length) {
  this.items.pop();
}

this.originals.slice(0).forEach(o => this.items.push(o));

Но это не работает.Если я удаляю проталкивающую часть, я получаю пустой список правильно, но если я пытаюсь каким-то образом отодвинуть его назад, он не будет работать.

Чего мне здесь не хватает?

Answer 1

Если вы дадите рабочую скрипку, я покажу вам, что произошло.

По сути, потому что вы модифицируете тот же объект массива.this.originals относится к тому же массиву, что и this.items

Срез возвращает мелкую копию объекта.Вы должны либо взять глубокую копию , либо ваш возврат должен быть тем, который инициализирует объект.

this.items.pop(); также удалит элементы из this.originals.