[v1] QToolbar with Vuex doesn't seem to get updated state

  • I have a fairly complex application, with a few levels of components, and I haven’t been able to replicate this in CodePen, so presume it’s something I’m doing. The component tree is like this:


    and the Vuex state contains a setting for whether certain items in toolbar menu should be visible. It’s an object like this:


    To show the issue, I’ve included the Store Getter toolbarMenu, and put these 2 lines into the relevant templates. In Default.vue (which provides the QToolbar), and Page.vue (which provides the QTabs at the bottom of the component tree), I have:


    To begin with, all is good:


    The problem is when this state is updated via an action within QPage triggered from the QTabs @input event. I can see via devtools that the Vuex state is indeed changed (all those trues become false), and the value in QPage updates, but the value in QToolbar does not:


    If I make a simple source code change when running via quasar dev, the HMR update brings the QToolbar value in line. Similarly, if I pull all this code into a single file in CodePen, it works exactly as it should. So I’m a bit stumped—what might I have done that makes this getter non-reactive in the toolbar?

  • Dammit. Been pondering this for ages, and now having written the post, I realise I hadn’t properly initialised the properties of toolbarMenu. The fact they were working in QPage put me off the scent. Apologies for the noise.

Log in to reply