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

Question

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

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

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

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

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

问题是当通过 this.options.data():

引用 prop 的值时，数据变量是 undefined

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

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;
  }
}

Resetting VueJS data properties to initial values