vue jsの不要なデータバインド

Question

私のアプリケーションには編集フォームがあります。このコンポーネントが作成されると、http要求が送信され、応答データは2つの異なる変数に保存されます。

axios.get(this.initializeURL) 
    .then((res) => { 
     this.form = res.data.form 
     this.formInit = res.data.form 
    }) 

"this.form"はフォーム入力にバインドされています。

<input type="text" class="form-control" id="name" v-model="form.name"> 

私の問題は次のとおりです。入力フィールドが変更されたとき、「this.formInit」オブジェクトも変更されます。私は "this.formInit"を入力フィールドにバインドしていません。

"this.formInit"に応答の初期データが含まれていないとしますか？

この不要なバインディングはなぜ発生しますか？

私の目標は、 "this.form" & "this.formInit"と比較して、フォームを更新する前にユーザーがいくつかのフィールドを変更したかどうかを確認することです。

Answer 1

あなたはObject.assignを使用して新しいオブジェクトを作成することができます。

axios.get(this.initializeURL) 
    .then((res) => { 
     this.form = Object.assign({}, res.data.form), 
     this.formInit = res.data.form 
    })