@bibogold doesn’t this bit
}else{
//next({ path: "/auth" })
//Router.push("/auth")
console.log("maldkds");
next({path:"/login"})
}
execute when you are on the login page ? If so well that is why you get the duplicate navigation error.
Vue Router will through errors if you try to go to the same URI as you are on.
The GH issue where it gets explained is here:
https://github.com/quasarframework/quasar/issues/6580
The solution is to use the component lifecycle hook mounted or activated on the component in q-tab-panel if you use keep-alive with tab-panel instead of watching prop changes.
This is the solution I ended up using for now.
https://codepen.io/turigeza/pen/abOVvLm
It 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
@amoss It is english : ))
Look at Lodash docs …
https://lodash.com/docs/4.17.15#debounce
Or
https://davidwalsh.name/javascript-debounce-function
Basically you don’t react to changes immediately but wait x milliseconds to see if any other action happened which effects the outcome.
Typically you use it when users type in a textfield you don’t go and react to every single keystroke but wait for a 250 millisecond silence/nonactivity only then would you go and save the field to the server or do what ever you need to.
@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.
@amoss There is no built in method to achieve that you have to track changes to those variables yourself.
If you only truly want to recalculate when both changed then you should have fields like prop1Tainted, prop2Tainted and mark those tainted with your watchers. Only recalculate if they are both tainted / changed.
But if you are just worried about the flickering you should debounce your recalculate function.
@amoss Watch as many properties as you need to. Calculate your display number which isn’t watched or computed with a function.
https://codepen.io/turigeza/pen/MWwOYZE?editors=1010
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.
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 @input and :value instead 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=1010
But still no luck.
In theory I should be able to watch props changing no ?