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

生物信息学是一个复选框选择，包括＆＃34;其他＆＃34;在其选项中 - 反过来，打开一个输入框，用户可以在其中插入自己的文本。我想要完成的是删除其他＆＃39;从params.data.bioinformatics数组中添加Vue.data.bioinformaticsOther。

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

我对Vue和JS一般都很陌生，所以我很抱歉，如果它真的很明显但我已经傻了一会儿（特别是因为我的其他人）使用相同方法的非数组选项工作得很好。

对不起，如果此说明令人困惑，我会在需要时添加更多数据。

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

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

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

1 个答案: