Vue2重置data()中的数据

介绍

Vue2重置data()中的数据

如何重置

• 通过this.$options.data 获取初始状态的data 为了防止this指向错误 需要用call() 来指定this指向

this.你要重置的数据域 = this.$options.data.call(this).你要重置的数据域

element ui的重置表单

• 通过我们通过上面方法 可以做到重置清除数据 但是如果你用了element 表单验证 (opens new window) 会触发表单验证的部分验证 我们需要再次使用 element 表单验证 (opens new window) 提供的重置方法

this.$resetForm('绑定form表单的ref', this.你要重置的数据域)

封装一个简易重置

• 如果我的重置不需要这么精确只需要都重置成'' 空值 那么我们可以封装成一个方法 然后在main.js vue入口文件注册使用
• 通过Object.keys 遍历对象中的数据 把其遍历成''空值

/**
 * @type {formName} String
 * @type {obj} any
 * @example 表单数据(消除表单验证提示) this.$resetForm('绑定form表单的ref', this.你要重置的数据域)
 * @example 普通数据 this.$resetForm('', this.你要重置的数据域)
 */
// formName: 表单的ref属性  obj表单的数据域
export default function resetForm (formName, obj) {
    // 清空表单
    if (this.$refs[formName]) {
        this.$refs[formName].resetFields()
    }
    // 清空数据域
    Object.keys(obj).forEach(key => {
        obj[key] = ''
    })
}

// main.js 入口文件注册
// 清空表单
import resetForm from '@/utils/resrtForm'
Vue.prototype.$resetForm = resetForm