Side Drawers not working in small screens using v-model

  • I am using v-model powered by a vuex variable to control the right and left drawers. They trigger fine on desktop view but once the breakpoint is reached they may no longer be triggered by v-model changes, you must use this$refs.layout method. Has anyone experienced this or do I have something wrong here?

  • I’m pretty sure you are supposed to use the model only for watching layout state. Use the methods when possible.

    Tip: the layout component provides itself as ‘layout’ to any of it’s descendants. So in any component that is a descendant of the layout, including views, you can do this:

    export default {
      inject: [ 'layout' ],
      methods: {
        toggle () {

    The vue feature by the way is provide/inject. Read and article about it here and it’s docs here

  • I am too having the exact same problem. V-model works only for desktop view as soon as I reduce the browser size to mobile view its stops working. I have also tried watching the model of the layout but that too doesn’t work until I increase the size of the browser to full desktop size, basically v-model has no effect when the browser is resized to mobile size. It seems like a bug to me. Please let me know if I am missing something.
    As per the example provided in the documentation, the v-model is used to toggle the drawer state on click of a button but it just works only on desktop view.

  • @benoitranque for me this solution would lead to bad practice as I have all kinds of logic to determine whether the the left and right drawers should be opened or closed in a Vuex mutation. This way i would be forced to put that logic in every deep component that can change the sidebars rather than one succinct commit call. The documentation gives an example of using v-model to handle the sidebars and it works perfectly in desktop mode. So I am seconding @dsahoo that I also think this is a bug.

Log in to reply