Side Drawers not working in small screens using v-model

[supercat]

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?

[benoitranque]

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 () {
      this.layout.toggleLeft()
    }
  }
}

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

[dsahoo]

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.

[supercat]

@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.