重置vue组件的data数据 this.$options.data() 重置
方法一
我们通常使用element-ui form表单组件时 点击表单重置按钮清空form表单数据
使用表单ref属性对象的resetFields() 方法可以重置表单
<template>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</template>
<script>
methods: {
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
</script>
方法二
vue中 this.$options.data() 可以重置vue组件中的data数据
<script>
export default {
data() {
return {
// data表单对象
form: {
input: ''
}
}
},
methods: {
// 重置表单方法
retset() {
this.form = this.$options.data().form;
}
},
}
</script>
方法三
使用Object.assign()方法,Object.assign (target, ...sources) 【target:目标对象】,【souce:源对象(可多个)】
如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性
Object.assign(this.$data.formData, this.$options.data().formData) // 重置至初始化值
方法四
遍历删除对象属性值
for( let key in obj){
delete obj[key]
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析