However, the current method is not allowed now and VueJS prohibits changing the $data var.
As you can see here in this https://github.com/vuejs/vue/issues/2873 ( $data is not allowed to be modified. )
So if I try the above method, I am getting a VueJS warning:
[Vue warn]: Avoid replacing instance root $data. Use nested data
properties instead.
Here is my JS code,
function initialState () {
return {
h2: 0,
ch4: 0,
c2h6: 0,
c2h4: 0,
c2h2: 0,
c3h8: 0,
c3h6: 0,
co: 0,
co2: 0,
o2: 0,
n2: 0,
selected: ''
}
}
export default {
name: 'something',
data () {
return initialState() // This is working fine
},
computed: {
tdcg: function () {
// some logic here...
}
},
methods: {
resetFields: function () {
this.$data = initialState() // --> This is what I want to achieve!
}
}
}
So what is the correct and the easiest way of re initialising my data?
解决方案
You can use Object.assign to iterate through all properties and assign them:
export default {
data () {
return {
h2: 0,
// other attributes...
};
},
methods: {
resetFields () {
Object.assign(this.$data, this.$options.data.call(this));
}
}
}
Note: I'm using this.$options.data to call the original data method again to get a fresh copy of the data. No need for a separate initialState function. The data method is the initial state function.
1907
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
