Vue resets data to its initial state

In some cases, the data in data needs to be reused, but the data in data has been assigned to various forms, variables, etc., so how to reset the value of data?

1. Assign values ​​one by one

...
data() {
 return {
 name: '',
 sex: '',
 desc: ''
 }
}
...
// Assign values ​​one by one this.name = ''
this.sex = ''
this.desc = ''

This method is clumsy, and of course it can achieve the desired effect, but it is troublesome to reassign values ​​one by one and the code will look messy.

The following method is definitely what you like, one line of code to get it done~

2. Use Object.assign()

MDN introduction to this method: The Object.assign() method is used to copy the values ​​of all enumerable properties from one or more source objects to a target object. It will return the target object.

Usage: Object.assign(target, ...sources)

The first parameter is the target object, and the second parameter is the source object, which means copying the source object properties to the target object and returning the target object.

This is to copy the properties of one object to another object

In Vue:

this.$data gets the data in the current state

this.$options.data() Get the data of the component in its initial state

Therefore, we can copy the data of the initial state to the data of the current state to achieve the reset effect:

Object.assign(this.$data, this.$options.data())

Of course, if you only want to reset a certain object or attribute in data:

this.form = this.$options.data().form

Extensions

The Object.assign(target, ...sources) method can also be used to merge objects:

const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };
const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, Note that the target object itself will also change.

If the object contains the same attributes, take the last attribute:

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };
const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 } The property takes the property of the last object

The above is my personal experience. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM. If there are any mistakes or incomplete considerations, please feel free to correct me.