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

Question

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

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

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

我希望能够在使用如下方法点击"重置"按钮时将数据变量恢复为此prop值:

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

问题是数据变量是undefined在通过this.options.data()以下方式引用prop的值时:

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

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

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