Разверните группу списков Vuetify на основе реквизитов маршрутизатора.

Question

В моей навигации у меня есть список-группа , где я показываю список мест.

Мой маршрут выглядит следующим образом:

{
    path: "/location/:id",
    name: "location.show",
    component: () =>
        import(
            /* webpackChunkName: "location.show" */ "../views/admin/location/Show"
            ),
    meta: {requiresAuth: true},
    props(route) {
        console.log('route:', route.params);
        const props = {...route.params};
        props.id = +props.id;
        return props;
    },
},
...

Мой шаблон выглядит так:

<v-list-group
    no-action
    prepend-icon="mdi-map-marker-multiple"
    :value="false">
    <template v-slot:activator>
        <v-list-item-title>Locations</v-list-item-title>
    </template>
    <v-list-item
        v-for="location in locations"
        :key="location.id"
        :to="{ name: 'location.show', params: {id: location.id}}"
    link>
    <v-list-item-title>{{ location.name }}</v-list-item-title>
        <v-list-item-action>
            <v-icon>mdi-map-marker</v-icon>
        </v-list-item-action>
    </v-list-item>
</v-list-group>

Я знаю, мне нужно установить :value="false" в :value="true" в расширить группу. Все работает отлично - мои элементы (группы) выбираются / подсвечиваются правильно.

Я считаю, этот пост SO говорит о той же проблеме, я действительно изо всех сил пытаюсь понять, что происходит.

Если маршрут соответствует /location/<id> Я хочу, чтобы моя группа "Местоположения" была расширена. Это будет означать установку :value="true". Если я ухожу, я хочу установить :value="false". У меня также есть маршрут, который выглядит как /location/<id>/foo, поэтому я знаю, что не могу явно указать /location/<id>.

Как установить значение :value на основе текущего маршрута? Спасибо за любые предложения!

Answer 1

Я делал этот путь более сложным, чем должен был быть. Вот что я в итоге сделал:

...
data: () => ({
    expand_locations: false,
}),
watch: {
    $route(to, from) {
        this.expand_locations = to.path.includes("/location/");
    },
},
...

Затем в моем шаблоне:

<v-list-group
    no-action
    prepend-icon="mdi-map-marker-multiple"
    :value="expand_locations">

    ...