vue js에서 원하지 않는 데이터 바인딩

Question

내 응용 프로그램에 편집 양식이 있습니다. 이 구성 요소가 생성되면 http 요청이 전송되고 응답 데이터는 두 개의 다른 변수에 저장됩니다.

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