前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >重置vue组件的data数据 this.$options.data() 重置

重置vue组件的data数据 this.$options.data() 重置

原创
作者头像
xyzzz
修改2020-11-27 14:31:18
6.2K0
修改2020-11-27 14:31:18
举报
文章被收录于专栏:前端学习。前端学习。

页面效果

每次点击新增用户需要把上一次填写的表单数据清空

方法一

我们通常使用element-ui form表单组件时 点击表单重置按钮清空form表单数据

 使用表单ref属性对象的resetFields() 方法可以重置表单

代码语言:javascript
复制

 <template>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
</template>
 
 <script>
 methods: {
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
</script>

方法二

vue中 this.$options.data() 可以重置vue组件中的data数据

代码语言:javascript
复制
<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:源对象(可多个)】

如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性

代码语言:javascript
复制
Object.assign(this.$data.formData, this.$options.data().formData) // 重置至初始化值

方法四

遍历删除对象属性值

代码语言:javascript
复制
for( let key in obj){
    delete obj[key]
}

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 页面效果
  • 方法一
  • 方法二
  • 方法三
  • 方法四
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档