重置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]
}