如何使用group组件-vuetify list group item

Vuetify List组件中的选择跟踪与必选选项设置

原创已于 2022-04-18 16:50:37 修改 · 950 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2022-04-14 11:48:08 首次发布

最近在用vuetify组件，挺好

恰好用了一个list组件，当作菜单，

<v-list color="transparent">
    <v-list-item link @click="navLink(NEWS_LIST_INDEX)">
        <v-list-item-content>
        <v-list-item-title> 列表 </v-list-item-title>
        </v-list-item-content>
    </v-list-item>
    <v-list-item link @click="navLink(NEWS_ADD_INDEX)">
        <v-list-item-content>
        <v-list-item-title> 新建 </v-list-item-title>
        </v-list-item-content>
    </v-list-item>
</v-list>

想要获取当前选择的index怎么办呢，加上<v-list-item-group>

<v-list color="transparent">
    <v-list-item-group v-model="navIndex">
    <v-list-item link @click="navLink(NEWS_LIST_INDEX)">
        <v-list-item-content>
        <v-list-item-title> 列表 </v-list-item-title>
        </v-list-item-content>
    </v-list-item>
    <v-list-item link @click="navLink(NEWS_ADD_INDEX)">
        <v-list-item-content>
        <v-list-item-title> 新建 </v-list-item-title>
        </v-list-item-content>
    </v-list-item>
    </v-list-item-group>
</v-list>

做到这里，如果观察navIndex的值，一会有，一会儿undefined，再对照界面一看，undefined时，菜单项，没有高亮选中，原来group内允许取消选择，那我始终需要有值怎么办，group里加上mandatory参数，如下：

<v-list color="transparent">
    <v-list-item-group v-model="navIndex" mandatory>
    <v-list-item link @click="navLink(NEWS_LIST_INDEX)">
        <v-list-item-content>
        <v-list-item-title> 列表 </v-list-item-title>
        </v-list-item-content>
    </v-list-item>
    <v-list-item link @click="navLink(NEWS_ADD_INDEX)">
        <v-list-item-content>
        <v-list-item-title> 新建 </v-list-item-title>
        </v-list-item-content>
    </v-list-item>
    </v-list-item-group>
</v-list>