VueJS2 - 计算属性/方法正在设置 Vue.data？

Question

我一直在使用 Vue 构建一个表单，在其中我将需要提交的所有数据复制到一个单独的 params 对象，对其进行处理，然后通过 AJAX 提交该对象。一切正常，除了一个恼人的数组，它似乎直接设置了我的 Vue.data 对象。

这是我的代码：

getParams: function () {
  return {
    organism:           this.organism,
    species_id:         this.speciesID,
    bioinformatics:     this.bioinformatics,
    // ... more params
  }
}

sanitizeParams: function() {
  var params = this.getParams();

  // other validations here (that work fine)     

  if(this.isOther(this.bioinformatics)) {

    console.log(this.bioinformatics) // ['other']
    console.log(params.bioinformatics) // ['other']

    var idx = params.bioinformatics.indexOf('other');
    params.bioinformatics.splice(idx,1);

    console.log(this.bioinformatics) // [] <-- Why does this change?!
    console.log(params.bioinformatics) // []        

    params.bioinformatics.push(this.bioinformaticsOther);
  }
  return params;
},

saveForm: function () {
  var params = this.sanitizeParams();
  if(this.formValidation) {
    // send ajax with correct params
  }
},

Bioinformatics 是一个复选框选择，其选项中包含“其他”——这反过来会打开一个输入框，用户可以在其中插入自己的文本。我想要完成的是从 params.data.bioinformatics 数组中删除“其他”并将 Vue.data.bioinformaticsOther 添加到其中。

我的Vue.data.bioinformatics 也发生了变化！只要params.bioinformatics.splice 运行，两个数组都会发生变化，而不仅仅是我的本地 params 对象（正如我预期的那样）。这反过来会导致我的 UI 停止正常工作，因为 Vue 存储在数据中的选项值不再是“其他”。我开始将这些函数作为计算属性，但我将它们更改为方法以查看是否可以解决问题，但同样的事情发生了（因此标题）。

总的来说，我对 Vue 和 JS 还是很陌生，所以如果这真的很明显，我很抱歉，但我真的傻眼了一段时间（特别是因为我使用相同方法的其他非数组选项只是很好）。

如果此描述令人困惑，我很抱歉，如果需要，我会添加更多数据。

编辑：在代码中添加了一些 console.log，以便更容易理解问题。还解决了描述中错误的变量名。

Answer 1

我希望您的问题与getParams 有关。如所写，getParams 将返回一个对象，其中生物信息学通过引用传递。换句话说，params.bioinformatics 和data.bioinformatics 是指向 same 数组的指针。因此，当您修改 params.bioinformatics 时，您会看到正在记录的行为。相反，您可能会将您的生物信息学属性作为副本而不是参考。

getParams: function () {
  return {
    organism:           this.organism,
    species_id:         this.speciesID,
    bioinformatics:     this.bioinformatics.slice(),
    // ... more params
  }
}