Question

我在申请表组件中有以下数据。

 data() {
        return {

            manuallyEnterAddress: false,
            currentAddress: "",
            postcode: undefined,
            postcode2: undefined,
            address: {
                county: "",
                town: "",
                addressLine1: "",
                atAddressFrom: "",
                atAddressTo: ""
            },
     }
}

申请完成后，数据将类似于以下代码。

 data() {
        return {

            manuallyEnterAddress: true,
            currentAddress: "Some House",
            postcode: SK1MPS,
            postcode2: SK5N0Q,
            address: {
                county: "Cheshire",
                town: "Chester",
                addressLine1: "Random street",
                atAddressFrom: "01/01/91",
                atAddressTo: "01/01/2010"
            },
     }
}

表单填写完毕后，用户需要一种方法来重置应用程序表单，并返回具有空白字段的第一个步进器。

手动写入每个字段以进行重置将是可怕的，因为数据至少有十倍。

我尝试了如下所示的forceUpdate，但没有成功。

        newApplication() {
           $vm.forceUpdate()
        }

有没有办法使用“ newApplication”功能来重置组件上的所有数据？

Answer 1

在您的情况下，无需重新渲染vue组件，这是forceUpdate()将要强制执行的操作。我将建议使用一个对象来为您的表单建模，假设为formModel。例如：

模板：

    <form id="app" @submit="checkForm" method="post" novalidate="true">
        <label for="name">Name</label>
        <input type="text" name="name" id="name" v-model="formModel.name">
        <label for="email">Email</label>
        <input type="email" name="email" id="email" v-model="formModel.email">
        <input type="submit" value="Submit">
    </form>
    <<ul>
        <li v-for="error in errors">{{ error }}</li>
    </ul>

JS：

   let app = new Vue({
        el: "#app",
        data: {
            errors: [],
            formModel: {}
        },
        methods: {
            checkForm: function(e) {
                let self = this
                self.errors = []
                if (!self.formModel.name) {
                    self.errors.push("Name required.")
                }
                if (!self.formModel.email) {
                    self.errors.push("Email required.")
                } else if (!self.validEmail(self.formModel.email)) {
                    self.errors.push("Valid email required.")
                }
                if (!self.errors.length) {
                    self.initializeForm()
                };
                e.preventDefault()
            },
            validEmail: function(email) {
                let re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
                return re.test(email)
            },
            initializeForm(){
                self.formModel = {}
            }
        }
    });

通过这种方式，无论组件中有多少输入元素，您都只需要设置主模型对象即可。

单击时重置组件数据（无$ vm.forceUpdate（））

1 个答案: