H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

例子

回答:

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


如此每次button点击时:

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

回答:

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

本文地址:H5W3 » vue中表单双向绑定,怎么高效清空?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址