重置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]
}
posted @   小白字太白  阅读(1357)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示