vue两行代码实现表单重置清空

一.在日常开发中，有很多对于表单的操作，当数据清空的时候大多是重新赋值数据回到初始值：

this.formData={name:'',pwd:''};这样再写一遍很麻烦

重置都是将数据获取到接口的时候将获取到的值用另一个变量用深拷贝的方式接收返回的结果

                                //因为深拷贝可以将对象自带的引用关系去掉

this.origanalData=JSON.parse(JSON.stringfy(this.formData));

二.代码实现

    <div>
        用户名:<input type="text" v-model="formData.username" />
        密码:<input type="text" v-model="formData.password" />
        <hr/>
        <button @click="clean">清空</button>
        <button @click="recover">恢复</button>
    </div>

export default {
    data() {
        return {
            formData: {
                username: '',
                password: ''
            } 
        }
    }, 
    created(){
        // 模拟异步请求
        setTimeout(()=>{ 
            this.formData = {
                username: 'Green',
                password: 'admin123'
            }  
            //                  将对象转成字符串再转成对象这样对于origanalData就没有引用关系了
            this.origanalData = JSON.parse(JSON.stringify(this.formData));//仅使用于对指定表单data数据接收（第一种）
            this.compon=JSON.parse(JSON.stringify(this.$data))//适用于对单个组件中所有值进行初始化 （第二种）
        },2000)
    }, 
    methods:{
        //清空表单
        clean(){
            //适用于在一个vue文件中对指定的值进行清空下面指定的值是‘formData’
            this.formData=this.$options.data().formData;
            console.log(this.$data);
            console.log(this.$options.data().formData);
            // this.$data=this.$options.data();//可以尝试一下直接赋值是报错的浏览器提示Use nested data properties instead.请使用嵌套的数据属性。所以使用下方这种
            //仅适用于将表单封装一个小组件且组件中的data存放的数据只有表单数据
            Object.assign(this.$data,this.$options.data())
        },
        //重置表单
        recover(){
            console.log(this.origanalData);
            // Object.assign(this.formData,this.origanalData )
            this.formData=this.origanalData;//第一种
            this.formData=this.compon;//第二种
        },
    } 
}