[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:

    3644af8f-2830-4a76-a84b-49677d7a3ded-image.png

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

    781e8aeb-779a-4424-8b5b-4e22c8054b94-image.png

    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:

        <pre>{{toolbarMenu.select}}</pre>
    

    To begin with, all is good:

    49380372-0639-4b16-a4b8-964dc3d8c256-image.png

    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:

    7ce7f01f-7ff5-48a8-a2ef-72fa41a3589a-image.png

    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