【vue】重置vue初始化声明的data的某个数据(附在线演示)

使用场景

在使用element和ivew的表单重置时，发现this.$ref['formData'].reset()并未将我们预期的数据全部还原为初始化时的数据，导致有脏数据，vue的api通过$options可以拿到初始化时的数据,如果在表单中清空数据记得结合这些this.$refs[name].resetFields()或this.$refs[name].clearValidate清除验证记录的方法使用，否则可能会出现红框

核心代码

this.formData = Object.assign({},this.$options.data().formData);

例子

export default {
    data(){
        return {
            formData: {
                name: '张三',
                age: 18            
            }        
        }    
    },
    mounted(){
        this.formData.age = 20;
        this.formData.name = '李四';      
        setTimeout(()=>{
          // 此时formData 跟声明时一样，name和age重置为'张三'，18 了
          this.formData = Object.assign({},this.$options.data().formData);
        },3000)
    }
}

$options,用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处：

new Vue({
  customOption: 'foo',
  created: function () {
    console.log(this.$options.customOption) // => 'foo'
  }
})

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

在线演示

codepen 在线例子：重置vue初始化声明的data的某个数据

参考

vue官网$options使用，mdn Object.assign(),Vue将组件data内的数据重置