将VueJS数据属性重置为初始值

Question

我有一个组件，它通过传入的组件prop提供初始数据属性并存储在数据变量中：

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

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

我希望能够在点击“重置”时将数据变量还原回此道具的值。使用如下方法的按钮：

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

问题是，当通过undefined引用道具的价值时，数据变量为this.options.data()：

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

Example Fiddle

Answer 1

如果您确实需要通过再次触发data()方法来重置所有数据属性，则可以这样做：

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

this中的this.$options.data变量引用了选项，而不是vue组件实例。这就是localvar属性为undefined的原因。因此，如果您从vue实例调用它，则需要通过函数call() method为其this提供引用。

但是，在大多数情况下，我只是直接分配值而不是调用Object.assign：

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