Vuetify Navigation drawer - control from other component

Question

In my App.vue component I have a Navigation Drawer menu with main items and some subitems. These subitems should be shown only after some event (button click) on the child component's page (variable totalResult should be true):

<v-list-item
    v-show="totalResult"
    @click="$vuetify.goTo('#somelink')">
    <v-list-item-content>
        <v-list-item-title>Review</v-list-item-title>
    </v-list-item-content>
</v-list-item>

But this child component is not directly connected to the App.vue component and I don't know how to pass a prop to this App.vue.

Is there a way to toggle this submenu items on and off from outside?

Answer 1

Use vuex in < vue2.7, or a reactive value in vue2.7+. Either way, you declare reactive state in one file, then import that value into your other files.

Here is the general idea:

mystate.js

const showSidebar = ref(false)
export showSidebar

toggle button

<script setup>
import {showSidebar} from './mystate'
</script>

<template>
 <button @click='showSidebar=!showSidebar />
</template>

sidebar parent

<script setup>
import {showSidebar} from './mystate'
</script>

<template>
 <sidebar :value='showSidebar' />
</template>