Закрытие моей модели с неработающим обработчиком событий Vue @click

Question

Я хочу, чтобы пользователь открывал и закрывал модальные при нажатии кнопки. Для организации своего кода я использую отдельные файловые компоненты.

В моем компоненте кнопки одного файла HamburgerButton.vue у меня есть:

<template>
  <button @click.prevent="onClick"
>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
      <path v-if="isOpen" d="M10"/>
      <path v-if="!isOpen" d="M0"/>
    </svg>
  </button>
</template>

<script>
  export default {
    data() {
      return {
        isOpen: false
      }
    },
    methods: {
     onClick (evt) {
      this.isOpen = !this.isOpen
      this.$emit('click', evt) 
      component
     }
    }
  }
</script>

Зарегистрированная кнопка в моем шаблоне:

<hamburger-button @click="onClicked"></hamburger-button>

Мой модальный html:

<div :class="isOpen ? 'block' : 'hidden'" class="static">
 <!--Modal-->
</div>

В моем app.js с моим Vue экземпляром у меня есть:

new Vue({
  el: '#menu',
  data: {
    isOpen: false,
  },
  methods: {
   onClicked() {
    this.isOpen = true;
   }
  },
  components: {
    HamburgerButton,
  }
})

Все работает, кроме модального нет закрывается, когда я снова нажимаю кнопку?

Я попытался в своем шаблоне следующее:

<hamburger-button @click="onClicked = !onClicked"></hamburger-button>

Но это не работает?

Answer 1

Вы должны передать событие click родительскому компоненту из HamburgerButton. Примерно так:

@click="onClick"

в скрипте:

...
methods: {
  onClick (evt) {
    this.isOpen = !this.isOpen
    this.$emit('click', evt) // <--- passing the event to a parent component
  }
}