[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
@inputevent. I can see via devtools that the Vuex state is indeed changed (all those
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.