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

问题描述

问 题

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

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

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

form： {

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

}

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

解决方案

如果只是單純清空的話：

比較單純的情況

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);
        }
    }
})

例子

这篇关于vue.js - vue中表单双向绑定，怎么高效清空？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！