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阵列中删除“其他”，并将Vue.data.bioinformaticsOther添加到它。

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

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