VueJS2

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 是一个复选框选择，在其选项中包含 "Other"——这反过来会打开一个输入框，用户可以在其中插入自己的文本。我想要完成的是从 params.data.bioinformatics 数组中删除 'other' 并向其添加 Vue.data.bioinformaticsOther。

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

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

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

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

Answer 1

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

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

VueJS2 - 计算 property/method 正在设置 Vue.data？

VueJS2 - computed property/method is setting Vue.data?

javascript

arrays

vue.js