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



  • 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!



  • 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?



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



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



  • Ok, I solved this by doing the following:

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


  • @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



  • 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. 🙂



  • 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.


Log in to reply