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