How to reset a component's data

Question

Under certain conditions I want to reinitialize a component's data to what it started with. As a start, instead of having the properties specified within the data(), I call a function which returns a data object, thus:

data() {
 return this.initialData();
},

How can I call this again in, say, $watch? Can I actually directly write to the data object?

score 1 · Accepted Answer · edited Jul 16 '22 at 00:39

1

From the API documentation on data:

After the instance is created, the original data object can be accessed as vm.$data.

So it should be as simple as Object.assign(this.$data, this.initialData());

edited Jul 16 '22 at 00:39

tony19

125,647
18
229
307

answered Oct 20 '17 at 17:36

Botje

26,269
3
31
41

It can be accessed but can it be replaced? – Jake Oct 20 '17 at 17:46
Apparently not, or at least it's not a good idea; " [Vue warn]: Avoid replacing instance root $data. Use nested data properties instead." – John Moore Oct 20 '17 at 18:13
Good remark. You could always do `Object.assign(this.$data, this.initialData())` to set properties one by one. – Botje Oct 20 '17 at 18:13
And yes, that works! Thanks! – John Moore Oct 20 '17 at 18:18

How to reset a component's data

1 Answers1