Модальное окно на vue?

Пытаюсь самостоятельно сделать модальное окно на VUE.js (только изучаю), может кто подскажет, что неправильно делаю?

App.vue
<template>
  <div id="app">
    <Header />
    <Modal />
    <modal v-if="showModalLogin" @close="showModalLogin = false"></modal>
  </div>
</template>

<script>
  import Header from '@/components/Header.vue'
  import Modal from '@/components/Modal.vue'
  export default {
    components: {
      Header,
      Modal
    },
    data() {
      return {
        showModalLogin: false
      }
    }
  }
</script>


Modal.vue
<template>
    <transition name="modal">
        <div class="modal-mask">
            1
        </div>
  </transition>
</template>
<script>
export default {
    name: 'Modal'
};
</script>


Header.vue
<template>
    <div class="page">
        <header class="header">
            <div class="container header-container">
                <div class="flex">
                    <div class="header-actions col-3l flex">
                        <button class="button header-actions__button-login" id="showModalLogin" @click="showModalLogin = true">Войти</button>
                        <button class="button header-actions__button-reg" id="showModalReg" @click="showModalReg = true">Регистрация</button>
                    </div>
                </div>
            </div>
        </header>
    <router-view/>
    </div>
</template>

<script>
    export default {
        name: 'Header'
    };
</script>
  • Вопрос задан
  • 750 просмотров
Решения вопроса 1
@xversus
1. Непонятно, что такое у вас modal, чем он отличается от Modal и где должно вызываться событие close, которое он прослушивает.
2. Вы в хедере пытаетесь обновить data из другого компонента.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы