Vue.js 基于路由器道具展开Vuetify列表组

在我的导航中，我有一个显示位置列表的窗口

我的路线如下所示：

{
    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>

我的模板如下所示：

{
    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>

位置
{{location.name}
mdi地图标记

我知道我需要将

：value=“false”

设置为

：value=“true”

以扩展组。一切正常-我的组项目被正确选择/突出显示

我相信我在谈论同一个问题，我真的很难理解发生了什么

如果路线与

/location/

匹配，我希望扩展我的“位置”组。这意味着设置

：value=“true”

。如果我离开，我想设置

：value=“false”

。我还有一条路径看起来像

/location//foo

，因此我知道我无法明确匹配

/location/

---

如何根据当前路线设置

：value

的值？谢谢你的建议

我把这条路弄得比需要的更复杂了。以下是我最后做的：

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

    ...

...

每次更改路线时，您都应该观察路线，如果路线与您的urlYep相匹配，则应对其设置条件。你的评论有帮助；我不确定我在找什么。因此，追踪观察者——我建立了数据模型，如果路径符合我的需要，就获取值。列表组根据需要展开/收缩。我确实觉得这可能有点“黑客”，我相信随着我的页面增长，我会遇到一些问题。现在，这让我可以更快地发货。：）