Toggling right/left panels in .15+ via child component

[thindery]

In Quasar v.14 you could do a “provide” like this on your vue that had the layout:

provide: {
    layout: 'this.$refs.layout'
  },

Then in my child component, that would determine when to toggle a panel did something like this:

inject: {
	layout: {}
},

and in my child component toggle the panel like so:

this.layout.showRight() 

I found that to be a very elegant solution and no need to pass data props back and forth.

What is the equivalent in v.15?

[thindery]

Well I’m going to share my solution for v.15+. It’s not the best but it works.

Instead of using the provide/inject. I had to set a global state value. So this is how I did it…

In the store, set the data:

state: {
  showRightDrawer: false
}

Set a mutator in the store:

mutations: {
  setShowRightDrawer: (state, payload) => {
  		Vue.set(state, 'showRightDrawer', payload.toggle)
  	},
}

Then you need to tie this up to the logic. If you have an icon, like the icon menu icon, to toggle drawers on click, update the @click to be:

<q-btn flat @click="_toggleRightDrawer">

Then setup methods:

methods: {
_toggleRightDrawer() {
      if(this.$store.state.showRightDrawer)
      {
        this.$store.commit('setShowRightDrawer', {'toggle': false})
      } else {
        this.$store.commit('setShowRightDrawer', {'toggle': true})
      }
    }
}

Finally, i set the prop of the initial view for the drawer panel to the view state now (make sure to do the mapState inside of computed so that you can use it):

<q-layout-drawer side="right" v-model="showRightDrawer">

Finally, in child components I can handle toggling of the right side panel. My specific use case was a datatable. Clicking on a row, I needed it to slide out the right drawer and provide some details about that table’s row.

So on my method that handles the row click I do something like this:

handleRowClick (row) {
  this.$store.commit('setShowRightDrawer', {'toggle': true})
}

In my eyes, this is not a very elegant solution and was tedious compared to the inject/provide way of doing things. If anyone has suggestions please let me know. I really preferred the old way with inject/provide ref’s but I could not figure it out. Had to go with a state value.