vue avoids the operation of two-way binding after variable assignment

For example: = this.list2, the result is also changed after the list changes, which is not the effect we want.

The first type:

Utilize and

= ( (this.list2) )

The second type:

ES6 parsing syntax

= { ...this.list2}

= [...this.arr2]

Supplementary knowledge:Solve that the v-model bound variable in vue is assigned to another variable, the two variables are changed at the same time

Let's take a look at the background of the problem first

We want to do a search + pagination function, using vue

We bind the pagination control to click events, and submit the formData form bound by v-model after clicking, but we ignore a problem, that is, when the input information changes, without clicking on search, and directly clicking on the pagination control, the search conditions in the new current search box will be submitted. This will not be logical.

So we added a new form object submitForm to data. Only when we click query, the formData form bound to v-model will be assigned to this object, and the submitForm is submitted when turning the page. This solves this problem.

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

 = 
// Using new also fails to achieve the effect = new Object()

but! ! !

SubmitForm actually changed

This is because when Object is assigned, what is passed is not the value, but the reference, and they point to the same space!

solve

The first type: use and

= ( () )

The second type: ES6 parsing syntax

= { ... }

The above article vue avoids two-way binding after variable assignment is all the content I share with you. I hope it can give you a reference and I hope you support me more.