Как показать sidebar на vue?

Question

[myskypesla]

Всем привет.

Есть компоненты Navigation.vue и Sidebar.vue, подключены в App.vue:

<template lang="pug">
  #app
    navigation
    sidebar
    router-view
</template>

В компоненте Navigation.vue есть кнопка, при клике на которую должен выехать компонент Sidebar.vue:

<template lang="pug">
    .btn Меню
</template>

И есть Sidebar.vue:

<template lang="pug">
  .sidebar
    .nav
      a.nav__link(href="/link1") Ссылка 1
      a.nav__link(href="/link2") Ссылка 2
</template>

Я хочу в объект data в файле App.vue обозначить значение show: true.
Вопрос: как при клике на .btn из компонента Navigation.vue, изменить значение show = true в компоненте App.vue и передать его в компонент Sidebar.vue Рассматриваю vuex если сильно заморочено без него.

Answer 1

[Evgeny Kulakov]

Отправляете событие при нажатии, ловите его в app, меняете состояние show, передаете в navigation

Comments

[myskypesla]

Evgeny Kulakov Спасибо я так и пробую делать, только не могу разобраться, как передать в app если в навигации я прописываю на кнопку @click=“show = !show”, и как из app передать значение если в Sidebar , если у .sidebar я ставлю параметр v-if=“show”

[Evgeny Kulakov]

myskypesla,

<app>
  <navigation @click="show=!show"/>
  <sidebar :show="show"/>
</app>

<template> <! -- navigation template-->
<div>
  <button @click="$emit('click')">
</div>
</template>

[myskypesla]

Evgeny Kulakov, спасибо большое Евгений. а разве в таком случае не сработает клик по всей навигации? У меня же не только кнопка в навигации а и ещё элементы могут быть

[Evgeny Kulakov]

myskypesla, нет, вы просто наделяете ваш компонент соответствующим событием и оно будет возникать только при нажатии на кнопку.

[myskypesla]

Evgeny Kulakov, понял. Спасибо большое ещё раз!