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
  }
},

生物信息学是一个复选框选择，其中包括“其他”在其选项--反过来，打开一个输入框，用户可以插入自己的文本。我试图完成的是从params.data.bioinformatics数组中删除“other”并将Vue.data.bioinformaticsOther添加到其中。

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

总的来说，我对Vue和JS还是很陌生的，所以我很抱歉，如果这是很明显的事情，但是我已经有一段时间很困惑了(特别是因为我使用相同方法的其他非数组选项工作得很好)。

很抱歉，如果这个描述混淆了，如果需要的话，我会添加更多的数据。

编辑：在代码中添加了控制台日志，这样就更容易理解问题了。还解决了描述中变量名错误的问题。

Answer 1

我想您在这里的问题在于getParams。正如所写的，getParams将返回一个通过引用传递生物信息学的对象。换句话说，params.bioinformatics和data.bioinformatics是指向同一个数组的指针。因此，当您修改params.bioinformatics时，您将看到正在进行日志记录的行为。相反，您可以将您的生物信息学属性作为副本而不是引用。

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