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

Question

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

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

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

我希望能够在使用如下方法点击“重置”按钮时将数据变量恢复为该道具的值：

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

问题是通过this.options.data()引用prop的值时数据变量是undefined：

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

---

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

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