[SOLVED][v1] q-expansion-item open tree when route is active?

ssuess

Hi, I have created a menu tree in the left hand drawer using q-expansion-item. When the tree is expanded, each item is a route that loads a page on the right. But there are other places within my app that I link to these pages and I would like the left hand menu to automatically open/expand to exactly that item when it is loaded on the right. Is there a simple way to accomplish this? Thanks!

ssuess

I was looking at the v1 docs, which make use of q-expansion-item in the left hand drawer as well, and they don’t expand either when going directly to a child page. Perhaps this needs to be a feature request?

ssuess

reported as feature request here: https://github.com/quasarframework/quasar/issues/3878

ssuess

Trying to solve this in my app code, but having some problems…Does anyone have any suggestions for opening expansion item levels by reference?

ssuess

Ok, I solved this by doing the following:

Give each expansion item a model, and set it to false (closed) in the data object
Within each page component, define all of its levels in an object
On load, emit levels to top level layout
In top level layout, on emit receive run method to set each expansion item’s v-model to true

qyloxe

@ssuess well, in general when you think “oh, let me use some events” then it is probably not the best idea in Vue

Please, look at Vuex and two-way computed properties here:

https://vuex.vuejs.org/guide/forms.html#two-way-computed-property

ssuess

Thanks, I am aware of the benefits of Vuex in some cases, but when an app is small enough there is not necessarily a reason to incur the overhead. That said, this particular app is approaching that size, so thanks for the reminder.

dylanreeve

FWIW I solved this with the following prop in the q-expansion-item:

:value="$route.matched[0].path == link.link"

In this case “link” is the v-for value from a menu object that’s structured like:

[
{ link: “/”, title: “Home” },
{ link: “/option”, title: “Option”, children: [ {link: “/option/subitem”, title: “SubItem 1.1”}, {link: “/option/subitem”, title: “SubItem 1.1”}]}
{ link: “/option2”, title: “Option 2”, children: [ {link: “/option2/subitem”, title: “SubItem 2.1”}, {link: “/option2/subitem”, title: “SubItem 2.1”}]}
]

A v-if in the Menu component decides whether I use a q-expansion-item (for items with children) or a q-item for single level items.

So far is seems to work.

No More Posting New Topics!

[SOLVED][v1] q-expansion-item open tree when route is active?