Vuetify list : open group according to active route

问题

Let's suppose I have a Vuetify list with 2 v-list-group, each one containing a v-list-tile. Here is a simplified pseudo-code:

 - Group1
   - Item 1 :to='/item1'
 - Group2
   - Item 2 :to='/item2'

My list works fine : if I click on "Item1", vue-router goes to "/item1".

Conversely, when I go to some route '/item1' (by typing the URL for example) and Group1 is closed in the list, is it possible to make Group1 to automatically open in the list?

Do I have to watch route and use v-list-group.value to set the open group, or does Vuetify have something to do this automatically?

回答1:

Here is my solution using route watch : https://codesandbox.io/s/vuetify-router-template-0176-vy766 (based on Daniel's code).

The insteresting part is in Nav.vue:`

watch: {
  $route(to, from) {
    if (to.matched.length > 1) {
      const parent = to.matched.filter(m => !m.parent)[0];
      const route = routes.filter(route => route.name === parent.name)[0];
      route.active = true;
    }
  }
}

来源：https://stackoverflow.com/questions/56821172/vuetify-list-open-group-according-to-active-route