Vue. js $ emit не передает событие щелчка от дочернего компонента - PullRequest
1 голос
/ 12 июля 2020

Я пытаюсь добавить событие щелчка на свою кнопку в дочернем компоненте, а затем скрыть компонент боковой панели, который я импортировал в родительский компонент. Я прочитал много статей и просмотрел несколько видеороликов, но пока не могу решить эту проблему.

Дочерний - панель навигации. 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>
...