You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在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绑定变量并初始化对应值就能实现,具体步骤如下:

  1. 在组件的data中定义绑定变量,初始化时赋值为你想要默认选中项的value值
  2. 给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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.08 22:05:27