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

Question

[Smeecy Smeecy]

Пытаюсь самостоятельно сделать модальное окно на 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>

Comments

[Алексей Ярков]

может кто подскажет, что неправильно делаю?

Может кто подскажет, что не так СЕЙЧАС?

[Smeecy Smeecy]

Алексей Ярков, ?

[Алексей Ярков]

Smeecy Smeecy, я имею ввиду, что хорошим тоном является описание проблемы, а не просто обрывки кода. А в идеале делаешь воспроизводимый пример в любой песочнице и приводишь ссылку. Человек идет по ссылке, воспроизводит проблему, фиксит и пишет что да как. А так оно нафиг никому не надо время тратить ))

[Smeecy Smeecy]

Алексей Ярков, очень затруднительно воспроизвести данную архитектуру файлов в песочнице). Проблема в том, что событие на кнопке, которая находится в Header.vue, не срабатывает и как следствие не открывается модальное окно, которое представлено в Modal.vue)

[PEMOK]

Используйте bootstrap для vue или элеменатал. Всеравно к этому прийдете. А так как у вас и не будет работать, используйте события для общения между компонентами или методы опишите show и hide для modal.

Answer 1

[xversus]

1. Непонятно, что такое у вас modal, чем он отличается от Modal и где должно вызываться событие close, которое он прослушивает.
2. Вы в хедере пытаетесь обновить data из другого компонента.

Comments

[Smeecy Smeecy]

1. Событие close было для закрытие модального окна, просто убрал для краткости кода в Modal.vue, modal это название транзишина в шаблоне Modal.vue , а Modal компонент
2. Почему в хедере, у меня же дата написана в App.vue...

[xversus]

1. А зачем вы "название транзишина" используете как компонент и прикручиваете ему event listener?
2. А вы посмотрите внимательнее код Header.vue, который выложили.

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

[Smeecy Smeecy]

xversus, Песочница с кодом, при нажатии на войти должно открываться модальное окно.

[xversus]

Smeecy Smeecy, добавьте в обработчик нажатия кнопки в хедере этот метод вместо того, что сейчас:

handleModal() {
  this.$emit("open");
}

А в App.vue прослушивайте событие open и по нему выполняйте showModalLogin = true.

Answer 2

[matiaspub]

https://medium.com/js-dojo/component-communication...

И Vuex

Answer 3

[segio_tt]

Я всё это делаю на vuetify, легко и просто, даже многие вещи идут как копи-паст