Как создать и уничтожить данные компонента с помощью VueJS? - PullRequest
Новая
       4

Как создать и уничтожить данные компонента с помощью VueJS?

0 голосов
/ 27 мая 2020

У меня есть модальный компонент в Vue.

В этом модальном компоненте есть несколько полей формы: 

<template>
    <div :class="visible">
        <input type="text" v-model="form.name">
        <input type="text" v-model="form.email">
        <input type="text" v-model="form.pass">
        <button @click="sendForm">Submit</button>
        <button @click="closeModal">Close</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                visible: false,
                form: {
                    name: '',
                    email: '',
                    pass: ''
                }
            }
        },
        methods: {
            sendForm() {
                // Send form
            },
            showModal() {
                this.visible = true
            },
            closeModal() {
                this.visible = false
           }
        },
    }
</script>

Когда модальное окно становится видимым, я показываю форму поля пользователю. Допустим, пользователь заполняет поля формы, но не нажимает «Отправить». Вместо этого он закрывает модальное окно.

В данном случае я хочу reset модального окна полностью вернуть в исходную форму. В основном уничтожить компонент. Затем повторно инициализируйте его, когда пользователь нажимает кнопку, чтобы сделать его видимым.

Когда модальное окно снова станет видимым, компонент должен быть новым экземпляром, и все component data должны быть очищены.

Что я пробовал: Я пытался очистить значения формы в компоненте при закрытии. Однако с более сложными формами / компонентами может быть трудно сбросить каждое свойство данных в исходное состояние.

Как я могу уничтожить компонент и воссоздать его? Есть ли лучшие практики для этой ситуации?

1 Ответ

0 голосов
/ 27 мая 2020

Вы можете создать метод для сброса данных компонента: 

reset() {
    Object.assign(this.$data, this.$options.data())
}

И вызывать его при закрытии модального окна. Будь осторожен! Работает только со свойствами данных.

...