Question

我创建了一个组件，允许用户从列表中选择对象，然后将其放入另一个“选定列表”中。因此，主列表中有100个项目，而用户选择的列表中有许多项目。他们当然可以根据需要删除和添加项目。

模态底部有两个按钮。取消并更新。 “取消”会忘记他们添加或删除的任何内容（本质上是撤消弹出模态时的撤消操作），而“更新”在技术上什么都不做，因为在添加和删除时，我实际上是在更新实际的选定列表。

所以我的data具有这两个属性（当然还有其他两个属性）：

originalSelections: [],
selectedMedications: [],

有一种方法只能调用一次，以set的{{1}}属性变为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))); } }为何发生变化感到困惑，所以我添加了selectedMedications来告知它是否是

watch

Cancel方法如下：

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％可行的方法。所以我弹出模态，删除一个项目，取消模态，它带回我删除的项目。完美！

如果我再次调出模态，则删除该相同项目或其他任何项目，取消模态，该项目将保持被删除状态，并且手表实际上已命中。我在代码中没有其他地方可以发生selectedMedications或originalMedications = …甚至originalMedications.push。据我了解，我用来设置originalMedications.slice的代码是在创建新对象，而不是以任何方式引用。

我发现的另一件奇怪的事情是，如果刷新页面，打开模式，取消而不进行任何添加或删除，则是奇怪的。然后，我再次调出模态并尝试添加或删除模态，然后取消模态，因为JSON.parse(JSON.stringify(match))与originalMedications相同，所以这些项目不会恢复到originalMedications状态。啊！

那么，在初始设置后再不对其执行任何操作时，该如何更改该属性？

Answer 1

在cancel方法中，当下面的直接分配在两个数据都引用相同之后（由于其数组）而在此处完成。因此，在第一个取消之后的任何时候，originalSelections和selectedMedications数组都将具有相同的引用，因此具有相同的数据。

this.selectedMedications = this.originalSelections;

反而更好地使用concat如下所示？这将创建originalSelections的副本，并将其分配给selectedMedications。因此，对selectedMedications进行的任何操作都不会影响originalSelections。

this.selectedMedications = [] .concat（this.originalSelections）;

为什么只设置一次Vue数据元素会发生变化？

1 个答案: