Vuetify list: открыть группу по активному маршруту

Question

Предположим, у меня есть список Vuetify с двумя v-list-group, каждая из которых содержит v-list-tile. Вот упрощенный псевдокод:

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

Мой список работает нормально: если я нажимаю «Item1», vue-router переходит в «/item1".

И наоборот, когда я иду по какому-либо маршруту '/ item1' (например, набрав URL), и Group1 закрывается в списке, можно ли заставить Group1 автоматически открываться в списке?

Нужно ли мне смотреть маршрут и использовать v-list-group.value для установки открытой группы, или Vuetify есть что-то для этого автоматически?

Answer 1

Вот мое решение с использованием отслеживания маршрута: https://codesandbox.io/s/vuetify-router-template-0176-vy766 (на основе кода Даниэля).

Интересная часть находится в 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;
    }
  }
}