Как переключить модальное окно?

Question

[poolpyos]

Имеется стандартное модальное окно Vue.js, мне необходимо переключить компонент логина на регистрацию при нажатии кнопки Sign Up


Как я могу это сделать?

Vue.component('login', {
    template: `#login-template`,
    data() {
        return {
            loginInput: '',
            passwordInput: ''
        }
    },

    methods: {
        sendRequest(e) {
            var self = this;

            axios.post('/', {
                name: this.loginInput,
                password: this.passwordInput
            })
                .then(function (res) {
                    /*if (response == "ok") {
                        window.location.replace("/")
                    }*/

                    if (res.data.auth == true) {
                        self.$emit('close', res.data);
                    }

                    else {
                        return;
                    }
                })

                .catch(function (error) {
                    console.log(error);
                });
        },

        signUpModal() {
        }
    }
});

Вот код компонента JS

<div class="login-footer">
    <slot name="footer">
        <div class="change-mode">
              <button class="change-mode-reg" @click="signUpModal"">Sign up</button>
                 <div class="change-mode-line"></div>
         </div>
 </slot>
</div>

Вот код непосредственно компонента

Answer 1

[Александр Дроздов]

1) Через динамические компоненты https://ru.vuejs.org/v2/guide/components-dynamic-a...
2) Или лучше через https://router.vuejs.org/ru/

Comments

[poolpyos]

Мне нужно, чтобы при клике модалка закрывалась, с регистрацией открывалась, вуе роутер действительно решение этой проблемы?

[Александр Дроздов]

poolpyos, ну по сути ты генеришь роутинг, который будет вести например #login = вызовет компонент LoginComponent, там ссылка на регистрацию, ведет на роутинг #registration, у тебя вызовется RegistrationComponent. Ну и конечно же предыдущие представления будут закрываться.

Ну проще и костыльнее будет конечно же динамические компоненты.

[poolpyos]

Александр Дроздов, у меня без перезагрузок страниц, если что

[poolpyos]

Александр Дроздов, а влияет ли то, что у меня script type=text/x-template? надо ли переносить модалки в другой вид?

[Александр Дроздов]

poolpyos, модальное окно это должно быть компонентом vue, чтобы можно было скормить роутеру или

[poolpyos]

Александр Дроздов, а можно конкретнее?

[Александр Дроздов]

poolpyos, https://ru.vuejs.org/v2/guide/components.html неплохо бы доку прочитать всю перед тем как приступать к кодингу)