Vuetify: Navigation drawer: communicate v-model changes to parent co

Question

I have created a Sidebar component using Vuetify's navigation drawer. The code looks something like this:

<template>
  <v-navigation-drawer persistent clipped v-model="isVisible" fixed app>
    <!-- content of the sidebar goes here -->
  </v-navigation-drawer>
</template>

<script>
export default {
  name: 'Sidebar',
  props: {
    visible: Boolean,
  },
  data() {
    return {
      isVisible: this.visible,
    };
  },
}
</script>

Please note that I am duplicating the visible prop with the isVisible data. I tried using the prop directly in the v-model but every time the sidebar closed, I would get a warning in the console about changing props directly, as they would be overwritten when the parent re-renders.

In the parent view, I have a button on the toolbar that is supposed to change icon depending on the visibility of the toolbar.

<template>
  <v-container fluid>
    <sidebar :visible="sidebarVisible"/>
    <v-toolbar app :clipped-left="true">
      <v-btn icon @click.stop="sidebarVisible = !sidebarVisible">
        <v-icon v-html="sidebarVisible ? 'chevron_right' : 'chevron_left'"/>
      </v-btn>
    </v-toolbar>
    <v-content>
      <router-view/>
    </v-content>
    <v-footer :fixed="fixed" app>
      <span>&copy; 2017</span>
    </v-footer>
  </v-container>
</template>

<script>
import Sidebar from '@/components/Sidebar.vue';

export default {
  name: 'MainView',
  data() {
    return {
      sidebarVisible: false,
      fixed: false,
      title: 'Title',
    };
  },
  components: {
    Sidebar,
  },
};
</script>

The problem I have is that if I close the sidebar by clicking outside of it, the icon of the button on the toolbar does not change to chevron-left. Moreover, in order to bring the sidebar back, I need to click on the button twice.

Clearly this is because the sidebarVisible data in the main view is not updated when the sidebar closes. How do I make sure that sidebarVisible is updated when the sidebar closes?

Answer 1

I am use next construction...

in my component

<template>
  <v-navigation-drawer v-model="localDrawer"></v-navigation-drawer>
</template>
...
<script>
  export default {
    props: { value: { type: Boolean } },
    data: () => ({
     localDrawer: this.value
    }),
    watch: {
     value: function() {
       this.localDrawer = this.value
     },
     localDrawer: function() {
       this.$emit('input', this.localDrawer)
     }
    }
  }
</script>

in parent layer

<app-drawer v-model="drawer"></app-drawer>

it's work for me

Answer 2

Use v-bind:value or :value to bind the drawer value from props.

Child component:

<template>
 <v-navigation-drawer v-bind:value="drawer"></v-navigation-drawer>
</template>

<script>
export default {
    props : ['drawer']
}
</script>

Parent component:

<template>
<app-side-bar :drawer="drawer"/>
  <v-app-bar app clipped-left>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
    </v-app-bar>
</template>

Answer 3

Vuetify navigation drawer issue fix:

1. Reset your browser window to default 100%
2. Here is the code,

Template:

<nav>
     <v-toolbar flat app>
        <v-toolbar-side-icon class="grey--text" @click="toggle"></v-toolbar-side-icon>

        <v-toolbar-title class="text-uppercase grey--text">
          <span class="font-weight-light">Repo</span>
          <span>hub</span>
        </v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn flat color="grey">
          <span>Sign Out</span>
          <v-icon right>exit_to_app</v-icon>
        </v-btn>
      </v-toolbar>

      <v-navigation-drawer app v-model="drawer" class="indigo">
        <p>test</p>
      </v-navigation-drawer>
</nav>

Script:

export default {
  data() {
    return {
      drawer: false
    };
  },
  methods:{
    toggle(){
        this.drawer = !this.drawer;
    }
  }
};