CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Vixtrime
Vixtrime

Reputation: 493

Bind drawer state in Vuetify when nav-drawer and app-bar is different components

now i have two components in my Dashboard:

Dashboard

<template>
    <v-app>
        <Toolbar :drawer="app.drawer"></Toolbar>
        <Sidebar :drawer="app.drawer"></Sidebar>
    </v-app>
</template>

<script>
    import Sidebar from './components/layouts/Sidebar'
    import Toolbar from './components/layouts/Toolbar'
    import {eventBus} from "./main";
    import './main'

    export default {
        components: {
            Sidebar,
            Toolbar,
        },
        data() {
            return {
                app: {
                    drawer: null
                },
            }
        },
        created() {
            eventBus.$on('updateAppDrawer', () => {
                this.app.drawer =  !this.app.drawer;
            });
        },
    }
</script>

Sidebar

<template>
    <div>
        <v-navigation-drawer class="app--drawer" app fixed
                             v-model="drawer"
                             :clipped="$vuetify.breakpoint.lgAndUp">
        </v-navigation-drawer>
   </div>
</template>

<script>
    import {eventBus} from "../../main";

    export default {
        props: ['drawer'],

        watch: {
            drawer(newValue, oldValue) {
                eventBus.$emit('updateAppDrawer');
            }
        },
    }
</script>

Toolbar

<template>
    <v-app-bar app>
        <v-app-bar-nav-icon v-if="$vuetify.breakpoint.mdAndDown"
                            @click="updateAppDrawer">
        </v-app-bar-nav-icon>
    </v-app-bar>
</template>

<script>
    import {eventBus} from "../../main";

    export default {
        props: ['drawer'],

        methods: {
            updateAppDrawer() {
                eventBus.$emit('updateAppDrawer');
            }
        }
    }
</script>

So now i have an infinite loop because when i press on icon in app-bar - watch in Sidebar, Sidebar understanding it like changes and starts a loop, updating drawer value in Dashboard, then Sidebar catching changes in watch and starts new loop. Also i have this warning, but it is another question.

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "drawer"

Thanks.

Upvotes: 4

Views: 5694

Answers (1)

tranceholic
tranceholic

Reputation: 351

I have similar issue and able to solve by following this link

https://www.oipapio.com/question-33116

Dashboard

<template>
    <v-app>
        <Toolbar @toggle-drawer="$refs.drawer.drawer = !$refs.drawer.drawer"></Toolbar>
        <Sidebar ref="drawer"></Sidebar>
    </v-app> 
</template>

Sidebar

<template>
    <v-navigation-drawer class="app--drawer" app fixed v-model="drawer" clipped></v-navigation-drawer>
</template>
<script>
    export default {
        data: () => ({
            drawer: true
        })
    }
</script>

Toolbar

<template>
    <v-app-bar app>
        <v-app-bar-nav-icon @click.stop="$emit('toggle-drawer')">
        </v-app-bar-nav-icon>
    </v-app-bar>
</template>

Upvotes: 10

Related Questions