Is there a way to reset a component?

[cheapsteak]

Currently if there's a component I want to reinitialize, I have to include the component as an expression, set that expression to blank, then reset the expression back to the component

<div v-component="{{currentComponent}}"></div>

container.currentComponent = '';
Vue.nextTick(function () {
  container.currentComponent = 'origional-component';
});

Is there a better way to do this?

[multimeric]

That's an interesting problem. Since you know that all a component's state is stored in the $data variable, you can always just override it with the original data. And you can store that original data (or rather a function that generates it) in the same module as the component like this:

//This function is exactly the same as your data function for the component originally was
function getDefaultData() {
    return {
        a: "A",
        b: "B"
    }
}

module.exports = {
    data: getDefaultData,
    methods: {
        resetData: function () {
            this.$data = getDefaultData();
        }
    }
};

This is assuming that your components are CommonJS modules, which I recommend doing anyway with Browserify and the Vueify transform.

[cheapsteak]

This seems like it should work, thanks!

[Kaijun]

@TMiguelT @cheapsteak it doesn't work anymore in Vue 2.0

[skywalker2013]

var defaultData = {
    a: "A",
    b: "B"
}

module.exports = {
data: defaultData ,
methods: {
resetData: function () {
this.$data = defaultData ;
}
}
};

I write it like above, it can't work. it must be a function to get the default data when you wanna reset. why?

[thollar13]

You can do the above in Vue 2.0 with Object.assign(this.$data, getDefaultData()). Here's a reference http://codepen.io/CodinCat/pen/ameraP?editors=0010

[dszmaj]

it works, thx :)

[shammadahmed]

You can do this: Object.assign(this.$data, this.$options.data())

[frank0718]

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

[IfnotFr]

Caution, Object.assign(this.$data, this.$options.data()) does not bind the context into data(). So if you are using this into your data method you may want to apply the context with

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

[wsw70]

@thollar13 : thank you for the solution. How would that work in a component where data is a function?

[shammadahmed]

@wsw70 Object.assign(this.$data, this.$options.data()) works with components.

[ferndot]

What about resetting to initial property values? And, running all lifecycle hooks?

[bradley-varol]

Object.assign(this.$data, this.$options.data()) doesn't work for me. Objects aren't being reset:

const dataDefaults = {
    _object: {
        a: false,
        b: ''
    },
};

data() {
     return {
          _object: dataDefaults._object,
    }
},

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