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.jsvue入口文件注册使用 - 通过
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
v1.4.14