如何在Vuetify的v-slide-group(mandatory模式)指定默认选中项
如何给Vuetify的v-slide-group指定默认选中项?
我正在使用Vuetify组件v-slide-group,该组件的mandatory属性要求至少选中一个项,默认会选中列表的第一项。请问是否可以指定特定的项(例如第N项)作为默认选中项?
代码示例如下:<v-slide-group center-active mandatory > <v-slide-item v-for="item in items" :key="item.id" :value="item.value" > {{ item.name }} </v-slide-item> </v-slide-group>
当然可以,通过v-model绑定变量并初始化对应值就能实现,具体步骤如下:
- 在组件的data中定义绑定变量,初始化时赋值为你想要默认选中项的
value值 - 给
v-slide-group添加v-model绑定该变量
修改后的完整代码示例:
<template> <v-slide-group center-active mandatory v-model="selectedSlide" > <v-slide-item v-for="item in items" :key="item.id" :value="item.value" > {{ item.name }} </v-slide-item> </v-slide-group> </template> <script> export default { data() { return { items: [ { id: 1, value: 'item1', name: '选项1' }, { id: 2, value: 'item2', name: '选项2' }, { id: 3, value: 'item3', name: '选项3' }, { id: 4, value: 'item4', name: '选项4' } ], // 默认选中第3项,对应其value值 selectedSlide: 'item3' } } } </script>
需要注意:
- 绑定变量的初始化值必须和目标
v-slide-item的:value属性值完全匹配 - 因为开启了
mandatory,所以初始化时不能让绑定变量为空,必须设置为一个存在的item的value值
内容的提问来源于stack exchange,提问作者DarT ALex
相关产品推荐
相关产品推荐

