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

相同的数组

切片返回对象的shallow copy 。您应该选择deep copy或者您的还原应该是初始化对象的那个。

this.items.pop(); 也会从this.originals中删除这些项目。

在Vue中还原对数组的更改

1 个答案: