articles/reset-data-in-a-vue-component

[utterances-bot]

Carl Cassar - Reset Data In A Vue Component

Although it’s easy to initialise a vue component with some data, it’s not immediately obvious how we might go about resetting this data to it’s original state once it has been modified. In this post, we take a look at two easy options.

https://www.carlcassar.com/articles/reset-data-in-a-vue-component

[tremendus]

I like the method of Object.assign() but it's important to note that if your component uses mixins, then this method doesn't re-initialize the mixins' data() methods, thus likely breaking your component.

[bigsee]

Really helpful article - thanks!

[malihee]

thanks for this helpful article I have a question about calling the reset() method. where should it be called?

[carlcassar]

Thank you @malihee! You can use it in another method, in a lifecycle method or directly in the template - wherever you need to reset the data model.

[malihee]

I really appreciate ur response but I still dont get it. let me ask my question clearer. I have a child component which I pass different props to it one at a time. I want whenever the new props arrive, all the data that is initialized to this child component rest to first value which is null. I call this reset() function in mounted() but it doesn't work (I think mounted is called once the component created) and also I cant call it from the mother component which pass the props. Is there a method that whenever the props is changed it noticed and reset the data??

[tremendus]

@malihee - to do what you want, exactly as you describe, you need to $watch the prop or props (see the Vue docs) and in this watcher handler you call call your reset method.

If you want to reset the entire data object you need to also call it when the vue instances is created - ie in the created() lifecycle callback. TIP: you will need to initialize any root level values in the components data function to avoid non-initialized errors/warnings from vue core.

But there is an easier way - in the parent component, created a computed property eg key that returns a unique key for the component based on the values of the various props that you are sending in - eg ${propA}-${propB}-${propC} and bind it to the child vue's key property. That way, whenever this computed key changes, which it will in response to a change in the value of any of these props - then the entire component will be re-rendered.

This is discussed in the vue docs - suggest go there and read up the key property of child components.

[malihee]

thank you @tremendus very much I'll try that and check all you said thank you again

[obustosm]

Man, your post helped me so much. Thanks for the effort of sharing.