Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use assign to reset data data in vue". In daily operation, I believe that many people have doubts about how to use assign to reset data data in vue. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubt of "how to use assign to reset data data in vue". Next, please follow the editor to study!

Ingenious reset of data data using assign

Because Object.assign () has the above features, we can use it in Vue as follows:

Vue components may have such requirements

In some cases, the data data of the Vue component needs to be reset. At this point, we can get the data in the current state through this.$data and the data in the initial state of the component through this.$options.data ().

Then you can reset the data of the current state to its initial state simply by using Object.assign (this.$data, this.$options.data ())

Reset the data of data to the initial state 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 stupid, and of course it can be effective, but it is troublesome to reassign values one by one and the code will look messy.

The following method is sure to be your favorite, one line of code is done.

two。 Use Object.assign ()

MDN's 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 the target object. It returns the target object.

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

The first parameter is the target object, and the second parameter is the source object, which copies the properties of the source object to the target object and returns the target object

It is to copy the properties of one object to another.

In vue:

This.$data gets the data in the current state

This.$options.data () gets the data in the initial state of the component

Therefore, the following 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 one object or property in data:

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

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 change.

If the object contains the same attribute, 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} attribute takes the last object's attribute, this is the end of the study on "how to use assign to reset data data in vue", hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.