Vue js. Modal. Как отделить 2 модальных окна друг от друга?

Question

[Ulyana]

В меню есть 2 ссылки: Войти, Регистрация.
По нажатию на ссылку - открывается соответствующее модальное окно.
Использую vue.js.
Не могу отделить их. в Итоге... при нажатии на Войти - открывается модалка регистрации.
Подскажите что не так..

<ul>
                    <!--модальное окно для Входа на сайт-->
                    <li id="modal-login">
                        <a href="#" id="show-modal" @click="showLoginModal=true">Sign In</a>
                        <modal v-if="showLoginModal" @close="showLoginModal=false">
                            <h3 slot="header">Sign In</h3>
                        </modal>
                    </li>

                    <!--модальное окно для Регистрации-->
                    <li id="modal-reg">
                        <a href="#" id="show-modal" @click="showRegModal=true">Sign Up</a>
                        <modal v-if="showRegModal" @close="showRegModal=false">
                            <h3 slot="header">Sign Up</h3>
                        </modal>
                    </li>
<ul>

JS:

//для Входа
        $(document).ready(function() {
            Vue.component("modal", {
                template: "#modal-template-login"
            });

            new Vue({
                el: "#modal-login",
                data: {
                    showLoginModal: false
                }
            });
        })


        //для Регистрации
        $(document).ready(function() {
            Vue.component("modal", {
                template: "#modal-template-reg"
            });

            new Vue({
                el: "#modal-reg",
                data: {
                    showRegModal: false
                }
            });
        })

<script type="text/x-template" id="modal-template-login">
        <transition name="modal">
            <div class="modal-mask">
                <div class="modal-wrapper">
                    <div class="modal-container">

                        <div class="modal-header">
                            <slot name="header">
                                default header
                            </slot>
                        </div>

                        <div class="modal-body">
                            <slot name="body">
                                default body
                            </slot>
                        </div>

                        <div class="modal-footer">
                            <slot name="footer">
                                default footer
                                <button class="modal-default-button" @click="$emit('close')"> OK LOGIN </button>
                            </slot>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </script>

    <script type="text/x-template" id="modal-template-reg">
        <transition name="modal">
            <div class="modal-mask">
                <div class="modal-wrapper">
                    <div class="modal-container">

                        <div class="modal-header">
                            <slot name="header">
                                default header
                            </slot>
                        </div>

                        <div class="modal-body">
                            <slot name="body">
                                default body
                            </slot>
                        </div>

                        <div class="modal-footer">
                            <slot name="footer">
                                default footer
                                <button class="modal-default-button" @click="$emit('close')"> OK REG </button>
                            </slot>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </script>

Answer 1

[Evgeny Kulakov]

1. Нет смысла оборачивать запуск вью в document.ready имхо, у вас же не используется jquery внутри или это только в примере?
2. Зачем заускать два экземпляра vue?
3. У вас id ссылки имеет одно и тоже имя show-modal, возможно из-за этого коллизия.

Comments

[Ulyana]

я делала 1 экземпляр vue и писала так:
showLoginModal: false,
showRegModal: false

и все равно не нравилось.
я просто не знаю как мне сделать так, чтоб было одно приложение и один темплейт НО для соответствующей ссылки показывалась своя инфа в модалке.
как это соединить

[Evgeny Kulakov]

Держите пример: https://codepen.io/kerf/pen/NgJobX
Я неуверен, что это bestparactices, но для примера подойдет)