Сбросить данные компонента по клику (без $ vm.forceUpdate ()) - PullRequest
Новая
       1

Сбросить данные компонента по клику (без $ vm.forceUpdate ())

0 голосов
/ 04 апреля 2019

У меня есть следующие данные в компоненте формы заявки. 

 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" для сброса всех данных на компоненте?

1 Ответ

0 голосов
/ 04 апреля 2019

В вашем случае нет необходимости повторно визуализировать vue Component, что и будет делать 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 = {}
            }
        }
    });

Inтаким образом, независимо от того, сколько входных элементов у вас есть в вашем компоненте, вам просто нужно установить основной объект модели.

...