vue中表单双向绑定，怎么高效清空？

Question

上面是一个表单，点击button弹出，问题是：

现在有多个订单，每个订单都可以点击这个按钮。但是每次弹出，数据都是上次点击时输入的。

解决方法：每次提交之后都清空表单数据

form： {

XXX："",
XXX: "",
XXX："",
XXX: "",
XXX："",
XXX: "",

}

问题又来了。。。这里有10中表单。每种表单可能有100个订单点击button，弹出表单
感觉这样每次提交之后都清空表单数据，要做很多次。。觉得很不方便。不知道大家有没有什么好方法

Answer 1

如果只是單純清空的話：

比較單純的情況

for(var name in this.$data.form) {
    this.$data.form[name] = ""
}

補充

new Vue({
    el: '#app',
    data() {
        return {
            value1: "",
            value2: "我是預設值",
            value3: "",
            value4: "我也是",
            value5: "",
        }
    },
    created() {
        this.defaultData = JSON.parse(JSON.stringify(this.$data));
    },
    methods: {
        submit() {
            // 送出後
            this.$data = Object.assign(this.$data, this.defaultData);
        }
    }
})

例子

Answer 2

// 用于重置的对象
const resetObj ={
field1: '',
field2: '',
....
};


如此每次button点击时:

this.formObj = Object.assign({},resetObj);

Answer 3

第一，数据驱动方式理解，这个弹框绑定的数据进行更改就行；
第二，以访问dom的方式进行数据获取会有bug，不会是responsive的。