VueJS2 - 計算されたプロパティ/メソッドがVue.dataを設定していますか？

Question

私は別のparamsオブジェクトに提出する必要があるすべてのデータをコピーして処理し、AJAXを介してそのオブジェクトを送信するVueでフォームを構築しています。私の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オブジェクトの代わりに、両方の配列が変更されます（私はそれが起こることを期待していました）。これは、データのVueによって保存されたオプション値がもはや 'その他'ではなくなったため、私のUIが正しく機能しなくなります。私はこれらの関数を計算されたプロパティとして持つことを始めましたが、問題を解決するかどうかを調べる方法に変更しましたが、同じことが起こります（したがってタイトル）。

私はVueとJSにはまだまだ新しいので、本当に明らかなことがあれば申し訳ありませんが、私はずっと間違いました。ちょうど良い）。

この説明が混乱する場合は申し訳ありませんが、必要に応じてデータを追加します。

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