Я пытаюсь добавить событие щелчка на свою кнопку в дочернем компоненте, а затем скрыть компонент боковой панели, который я импортировал в родительский компонент. Я прочитал много статей и просмотрел несколько видеороликов, но пока не могу решить эту проблему.
Дочерний - панель навигации. vue
<template>
<div id="header">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<div class="toggle-btn ml-3">
<button type="button" class="close" @click="closeSidebar" aria-label="Close">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="nav-head mx-auto">
<a class="navbar-brand" href="#">Contact Book</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse col-lg-10 mx-auto" id="navbarSupportedContent">
<form class="form-inline col-md-12 my-2 my-lg-0 justify-content-center">
<input class="form-control shadow-none col-md-6 mr-sm-2" type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-outline-secondary shadow-none my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</template>
<script>
import sidebar from './Sidebar.vue'
import contactList from './ContactList.vue'
export default {
data() {
return {
}
},
methods: {
closeSidebar() {
this.$emit('slideLeft');
document.querySelector('.close').classList.toggle('rotate');
},
},
components: {
sidebar,
contactList
}
}
</script>
Родительский - приложение. vue
<template>
<div id="app">
<navbar></navbar>
<div class="d-flex">
<transition name="ease">
<sidebar class="slide" v-show="clickToggle" @slideLeft="toggleSidebar"></sidebar>
</transition>
<contact-list></contact-list>
</div>
<modal></modal>
</div>
</template>
<script>
import sidebar from './components/Sidebar.vue'
import navbar from './components/Navbar.vue'
import contactList from './components/ContactList.vue'
import modal from './components/AddContactModal.vue'
export default {
name: 'app',
data() {
return {
clickToggle: true
}
},
methods: {
toggleSidebar() {
this.clickToggle = !this.clickToggle;
}
},
components: {
sidebar,
navbar,
contactList,
modal
}
}
</script>
А это еще один дочерний компонент - Sidebar. vue, который я пытаюсь скрыть через родительский компонент
<template>
<div id="sidebar">
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action bg-light">
<i class="fa fa-id-card"></i><span class="item-desc">All Contacts</span></a>
<a href="#" class="list-group-item list-group-item-action bg-light" data-toggle="modal" data-target="#exampleModalScrollable">
<i class="fa fa-user-plus"></i><span class="item-desc">Add Contact</span></a>
<a href="#" class="list-group-item list-group-item-action bg-light">
<i class="fa fa-users"></i><span class="item-desc">Groups</span></a>
<a href="#" class="list-group-item list-group-item-action bg-light">
<i class="fa fa-share-alt"></i><span class="item-desc">Share Contacts</span></a>
<a href="#" class="list-group-item list-group-item-action bg-light">
<i class="fa fa-trash"></i><span class="item-desc">Trash</span></a>
</div>
</div>
</div>
</div>
</template>
<script>
import contactList from './ContactList.vue'
import modal from './AddContactModal.vue'
export default {
methods: {
},
components: {
contactList, modal
}
}
</script>
<style lang="">
#sidebar {
-webkit-transition: margin .25s ease-out;
-moz-transition: margin .25s ease-out;
-o-transition: margin .25s ease-out;
transition: margin .25s ease-out;
}
.hide {
margin-left: -16rem !important;
}
#wrapper {
overflow-x: hidden;
}
#sidebar-wrapper {
min-height: calc(100vh - 57px);
-webkit-transition: margin .25s ease-out;
-moz-transition: margin .25s ease-out;
-o-transition: margin .25s ease-out;
transition: margin .25s ease-out;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .sidebar-heading i {
transform: rotate(90deg);
}
#sidebar-wrapper .list-group {
width: 16rem;
}
#sidebar-wrapper .list-group .list-group-item {
padding: 20px 30px;
}
#sidebar-wrapper .list-group .list-group-item i {
width: 40px;
padding: 0 10px;
}
#page-content-wrapper {
min-width: 100vw;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
@media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}
</style>