当我只设置一次Vue数据元素时,为什么它会发生变化?

我已经创建了一个组件,允许用户从一个列表中选择对象,并将它们放入另一个“选定列表”,比如说。所以在主列表中有100个项目,但是在用户选择的列表中有很多。当然,他们可以根据需要删除和添加项目。

模式底部有两个按钮。取消并更新。如果cancel忘记了它们添加或删除的任何内容(本质上是它们弹出模式时的撤消),而update在技术上不起作用,因为当您添加和删除时,我实际上正在更新实际选定的列表。

所以我的 data 有这两个属性(当然还有其他属性):

originalSelections: [],
selectedMedications: [],

有一个方法只被调用一次 set 这个 selectedMedications 属性的当前状态 originalSelections 是。我有一个 console.log 为了证明我不止一次运行这个方法,它也不会再被击中。

console.log('Post Initing');

let Selected = [];

for (let med of this.value.OtherNotFromEpic) {
  let match = this.otherMedications.find(x => { return x.value === med });

  if (match) {
    Selected.push(JSON.parse(JSON.stringify(match)));
    this.originalSelections.push(JSON.parse(JSON.stringify(match)));
    this.selectedMedications.push(JSON.parse(JSON.stringify(match)));
  }
}

我不明白为什么 选择的医学 正在更改,因此我添加了 watch 让我知道是不是:

watch: {
  originalSelections(newValue) {
    console.log(' ** Original Selection Changed', this.init, newValue);
  },
},

取消方法如下:

cancel() {
  $('#' + this.modalID).modal('hide');
  console.log('Cancel: this.originalSelections', JSON.parse(JSON.stringify(this.originalSelections)));

  this.selectedMedications = this.originalSelections;

  this.$nextTick(() => {
    console.log('  Cancelled: this.selectedMedications', JSON.parse(JSON.stringify(this.selectedMedications)));
  });
},

你可以看到我正在设置 选择的医学 不管它是什么。

奇怪的是…这在我第一次提出模式时就100%有效了。所以我弹出了模式,删除了一个项目,取消了模式,它将返回我删除的项目。很完美!

如果我再次打开模式,删除同一个项目或任何其他项目,取消模式,该项目保持删除,手表实际上被击中。我在密码里没有别的地方 originalMedications = … 或 originalMedications.push 甚至 originalMedications.slice 曾经发生过。据我所知, JSON.parse(JSON.stringify(match)) 我用来设置它的代码正在生成一个新对象,而不是以任何方式引用。

我发现另一个奇怪的事情是,如果刷新页面,打开模式,取消而不做任何添加或删除。然后我再次打开模式并尝试添加或删除,然后取消模式,这些项不会恢复到 originalMedications 因为状态 原始药物 是一样的 选择的医学 . 啊!

那么,当我在初始设置之后从未对某个属性做过任何操作时,该如何更改它呢?