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