Resetting VueJS data properties to initial values

Question

I have a component that is provided an initial data property via a passed-in component prop and stored in a data variable:

<component :propvar="true"></component>

data() {
  return {
    localvar: this.propvar,
    localvar2: true
  }
}

I would like to be able to revert the data variable back to this prop's value when hitting a 'reset' button with a method like this:

methods: {
  reset() {
    Object.assign(this.$data, this.$options.data());
  }
}

The problem is that the data variable is undefined when referencing the prop's value via this.options.data():

console.log(this.$options.data()); => Object {localvar: undefined, localvar2: true}

Example Fiddle

thanksd · Accepted Answer · 2017-04-26 20:26:37Z

21

If you really need to reset all of your data properties by firing the data() method again, you can do that like so:

methods: {
  reset() {
    Object.assign(this.$data, this.$options.data.call(this));
  }
}

The this variable in the this.$options.data is referencing the options, not the vue component instance. That's why the localvar property was undefined. So if you're calling it from the vue instance, you'll need to give it a reference to this via the function's call() method.

But, in most circumstances, I would just assign the value directly instead of calling Object.assign:

methods: {
  reset() {
    this.localvar = this.propvar;
  }
}

edited Apr 26, 2017 at 20:26

answered Apr 26, 2017 at 19:54

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stetzon Over a year ago

Nice! That seems to do the trick. Just for clarification: the reason why I would prefer to use Object.assign() in this instance is because it is a lot cleaner when you have many props (which I do for this particular component - not shown in the example). Just as you stated, under most circumstances, the other method would be just fine . Thank you!

Collectives™ on Stack Overflow

Resetting VueJS data properties to initial values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related