Как переключать компоненты vue

У меня есть основной файл App.vue, в котором я разместил такие элементы, как панель навигации. Остальная часть содержимого отображается с помощью vue-router. Я также пытаюсь разместить в этом файле серию модальных окон, чтобы к ним можно было получить доступ на любом маршруте, как только будет нажата соответствующая ссылка на панели навигации. Мне сложно понять, как переключать компоненты, чтобы они отображались и исчезали (постепенное появление -> Я использую модальные окна начальной загрузки. Идентификатор $ для jQuery вызывает проблемы и не распознается)

Любые идеи?

APP.VUE

<template>    
    <nav class = "navbar navbar-expand-lg px-0" id = "navbar" v-else>
        <a href = "#" class='col-md-2 text-center py-0'>
            <img src = "./assets/4.png" id='site-logo'>
        </a>

        <div class = "d-md-flex w-100">

            <div class = "d-md-flex flex-1">
              ...
            </div>

            <div class = "d-md-flex flex-1" style='justify-content: flex-end'>
                <p class = "text-white mb-0 stat-decor pill-blue nav-item mr-2">
                    <a class='text-white'>Login</a>
                </p>

                <p class = "text-white mb-0 stat-decor pill-blue nav-item mr-2">
                    <a href='/register' class='text-white'>Register</a>
                </p>
            </div>
        </div>
    </nav>


    <!-- MODALS -->
            <!-- LOGIN MODAL -->
            <LoginModal />
    <!--  -->
    <router-view/>
  </div>
</template>

<script>
import LoginModal from '@/components/modals/loginModal';

export default {
  name: 'App',
  components: {
      'LoginModal': LoginModal
  },

  data () {
      return {
          
      }
  },
  ...
}
</script>

МОДАЛЬ ВХОДА

<template>
    <div class = "modal fade" id = "loginModal" tabindex = "-1" role = "dialog" aria-labelledby = "loginModal" aria-hidden = "true">
        <div class = "modal-dialog modal-dialog-centered" role = "document">
            <div class = "modal-content">
                <div class = "modal-body">
                    <p class = "font-weight-bold text-white h5 text-center text-uppercase">Login</p>
                    <div class = "container">
                        <form>
                            <div class = "form-group">
                                <input type = "text" class = "form-control" placeholder='Username...'>
                            </div>
                            <div class = "form-group">
                                <input type = "password" class = "form-control" placeholder='Password...'>
                            </div>
                            <div class = "form-group text-center my-4">
                                <input type = "button" value = "Submit" class='rounded'>
                            </div>
                        </form>

                        <p class = "text-white text-center small">
                            Forgot Password?
                            <br>
                            <span style='color: #c4b2fe'>or</span>
                            <br>
                            Register a new account
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'loginModal',
    data () {
        return {

        }
    },

    mounted () {
        
    }

    
}
</script>

<style scoped>
    .block {display: block}
    .modal-body {height: 50%}
    .modal-body p:nth-child(1) {margin: 40px 0;}
    .modal-content {background-color: #4855d8;}
    .modal-content input {
        background-color: #252b6e;
        border: none;
        font-weight: bold;
        color: #b6b4b7;
        font-size: 14px;
    }
    .modal-content input[type='button'] {
        color: white; 
        margin: auto;
        padding: 8px;
        text-align: center;
        cursor: pointer;
        background-color: #080715;
        width: 120px;
    }
</style>

vue.js bootstrap-4 bootstrap-modal

15.11.2018 10:35

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

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

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

679

Ответы 1

Вы можете использовать переходы, который VUE включает https://vuejs.org/v2/guide/transitions.html. Наряду с v-если, чтобы показать или скрыть модальное окно.

APP.VUE - HTML

<transition name='modal-zoom'>
   <LoginModal v-if = "activeModal" />
</transition>

APP.VUE - JS

methods: {
  activeModal: function () {
    // return boolean
  }
}

Хорошо, это помогает переключать фактический компонент, но я не знаю, как переключать модальное окно начальной загрузки в компоненте <LoginModal> со страницы App.vue.

— 15.11.2018 12:18

15.11.2018 11:15