Reacting to tab changes within tab panel.
-
I have some components inside q-tab-panel and I would like those components to react to tab changes (load their data). I thought I would pass down the tab model as a prop and watch that inside the component but for some reason this isn’t working.
I can not get my head around it why. It may just be I fundamentally misunderstood something in Vue.
Do you know why ? Would you be so kind to explain or just point me in the right direction. How would you do this if this is not the way? Basically any suggestion would be welcome. : )
Here is the pen:
https://codepen.io/turigeza/pen/KKpXerr?editors=1010Thank you all,
-
Instead of passing down the v-model, try using the @input event of QTabPanels and get your data with that and pass down the data (an object?) to your QTabPanel.
Scott
-
Thank you but I don’t fully understand you sorry.
I am trying to pass props down to a component inside QTabPanel but not to QTabPanel.
The model of QTabPanel is just a string so in theory this should make no difference.However I modified the example to use
@inputand:valueinstead of v-model. (Although this should be the same) And indeed it has no effect.https://codepen.io/turigeza/pen/yLNzRWw?editors=1010
I also tried passing down an object as a prop.
https://codepen.io/turigeza/pen/oNXGQzW?editors=1010But still no luck.
In theory I should be able to watch props changing no ?
-
I meant, couldn’t you download the data for all the tabs and then pass that in according to the tab you are on?
You wouldn’t need the watcher in the global-component.
Scott
-
I see. : )
I think that would be rather an ugly solution in my case. I would rather not do that.
To help you understand I am using tab panels in a general layout. The whole idea is that I only load the data that I need.
On the left the list.On the right the various info available about the selected item. It could well contain statistical data which requires juice in the backend : )
I would only like to load data for tabs open and even within that in certain case only to the sections which are open.
-
Ok. Then is the data and the stucture 100% specific to each panel? If yes, you could build the “panel” components and use the mounted lifecycle event to generate the calls for data. Not sure that is a good solution.
Have you tried the
$propswatcher? Since it is only one prop you are watching, it might fire as you need it too. Still not sure myself why the watcher isn’t firing. Maybe a question for the Vue community…
Scott
-
@s-molinari said in Reacting to tab changes within tab panel.:
Ok. Then is the data and the stucture 100% specific to each panel? If yes, you could build the “panel” components and use the mounted lifecycle event to generate the calls for data. Not sure that is a good solution.
Most of the time but not always. Just on that very page the fields change on every item you pick on the left.
Mounted will only fire once because I am using keep-alive on the tabs.
And I need that because that is what keeps the scroll position of the tabs and the selected tab and the open close status of the expansion-item etc … : ) I don’t really want to track their state …Otherwise every time you choose a new item from the list all of these will be reset and nothing would be more annoying than that. : )
Have you tried the $props watcher? Since it is only one prop you are watching, it might fire as you need it too. Still not sure myself why the watcher isn’t firing. Maybe a question for the Vue community…
You mean watching the $props instead of a single element in it ? No. How do you do that ? I didn’t know you can do that.
Unfortunately (or fortunately shall we say : )) I can not reproduce this in a plain Vue component. Otherwise I would take it to the Vue forum.
This issue so far is limited to q-tab-panels. I think it is to do with how these panels are created … although not sure.
Btw I managed to get to a point which I can live with for now I post my solution later … it is rather bodged or it feels so. Thank you for the ideas.
-
This is the solution I ended up using for now.
https://codepen.io/turigeza/pen/abOVvLmIt is not ideal because it only loads data on each tabs once. Although I can live with that I wanted to load data every time the tab changes I can not find a way of doing that.
Best I got for now.If anybody knows why the watcher on my prop doesn’t work within the component in q-tab-panel I would still be interested to know. See my first pen here.
https://codepen.io/turigeza/pen/KKpXerr?editors=1010 -
Since we hashed this out. Do you mind starting a GH issue as a bug with your original codepen? Maybe we are both just missing something stupid and it might be embarrassing. Or, it might be some sort of a bug. At least there we’ll find out.
Scott
-
The GH issue where it gets explained is here:
https://github.com/quasarframework/quasar/issues/6580The solution is to use the component lifecycle hook
mountedoractivatedon the component in q-tab-panel if you use keep-alive with tab-panel instead of watching prop changes. -
Puh. Ok. That needs some sort of documentation. I’m still not sure I get it. But, glad it wasn’t something stupid in the end. LOL!
Scott
-
Ok. Now I understand. Didn’t know about the
activatedhook for keep-alive before this either. Now I do.Scott
-
@s-molinari said in Reacting to tab changes within tab panel.:
Ok. Now I understand. Didn’t know about the
activatedhook for keep-alive before this either. Now I do.Scott
