vue中表单双向绑定,怎么高效清空?

缓缓
  • 1.3k

表单

上面是一个表单,点击button弹出,问题是:

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

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

form: {

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

}

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

回复
阅读 16.8k
3 个回答
Tomoe
  • 6.2k
✓ 已被采纳

如果只是單純清空的話:

比較單純的情況

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

例子

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


如此每次button点击时:

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏