vue 변수 부여 후 양방향 귀속 작업 피하기

이것list = this.list2, 결과는list가 바뀐 후list2도 바뀐다. 이것은 우리가 원하는 효과가 아니다
첫 번째:
JSON을 이용해서parse와 JSON.stringify
this.list= JSON.parse( JSON.stringify(this.list2) )
두 번째:
ES6 해석 구문
this.list= { ...this.list2}
this.arr= [...this.arr2]
보충 지식: vue에서 v-model 귀속된 변수의 값을 다른 변수에 부여한 후 두 변수가 동시에 바뀐다
일단 문제 배경부터 볼게요.
우리는 검색 + 페이지 나누기 기능을 하려고 합니다. vue를 사용하십시오
우리는 페이지 컨트롤러를 클릭 이벤트에 연결시키고 클릭한 후에 v-model이 연결된formData 폼을 제출합니다. 그러나 입력한 정보가 바뀌었을 때 검색을 누르지 않고 페이지 컨트롤러를 누르면 현재 검색 상자에 있는 검색 조건이 제출됩니다.이렇게 하면 논리에 맞지 않는다.
그래서 우리는 데이터에 폼의 대상인submitForm을 새로 추가했습니다. 조회를 클릭할 때만 v-model이 귀속된formData 폼이 이 대상에게 값을 부여할 수 있고 페이지를 넘길 때submitForm을 제출합니다.이렇게 해서 이 문제를 해결했다.

data() {
  return {
  formData: {
   timeStart: '',
   timeEnd: '',
   //  
   pageNo: 1,
   pageSize: 10
  },
  submitForm: {
   timeStart: '',
   timeEnd: '',
   //  
   pageNo: 1,
   pageSize: 10
  },
 }

this.submitForm = this.formData
//   new 
this.submitForm = new Object(this.formData)

하지만!!!
submit Form이 바뀌었어요.
이것은 Object가 값을 부여할 때 전달하는 것은 값이 아니라 인용이기 때문에 그들은 같은 공간을 가리킨다!
해결하다
첫 번째: JSON을 이용한다.parse와 JSON.stringify
this.submitForm = JSON.parse( JSON.stringify(this.formData) )
두 번째: ES6의 해석 구문
this.submitForm = { ...this.formData }
상기 vue는 변수 부여 후 양방향 귀속을 피하는 동작이 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.