Vuetify v-list-item-group多选失效且无法预选中首个列表项问题

问题根因 #

• 开启multiple属性后，v-list-item-group的v-model必须绑定数组类型的值，你当前selectedItem初始值为数字0，类型不匹配导致多选功能失效、也无法正常绑定预选项
• 你的v-list-item绑定的:value是item对象，初始值给数字索引0和value类型不匹配，无法触发预选中

修复方案 #

方案1：保留value绑定item对象的逻辑 #

模板调整（新增v-for必填的key属性，其余逻辑不变）

<v-list shaped>
  <v-navigation-drawer>
    <v-list shaped>
      <v-list-item-group
          v-model="selectedItem"
          multiple
      >
        <template v-for="(item, i) in items">
          <v-list-item
              :value="item"
              :key="i"
          >
            <v-list-item-title>{{item.text}}</v-list-item-title>
          </v-list-item>
        </template>
      </v-list-item-group>
    </v-list>
  </v-navigation-drawer>
</v-list>

数据逻辑调整

data: () => ({
    // 改为数组类型存储选中项
    selectedItem: [],
    drawer: null,
    items: [
      { icon: 'fas fa-home', text: 'Dashboard', route: '/home' },
      { icon: 'fas fa-money-check-alt', text: 'Invoices', route: '/invoices' },
      { icon: 'fas fa-dolly', text: 'Partners', route: '/partners' },
      { icon: 'fas fa-exchange-alt', text: 'Items', route: '/items' },
    ],
  }),
// 实例创建后预选中第一个项
created() {
  this.selectedItem.push(this.items[0])
}

方案2：用索引作为选中标识（更简单） #

模板调整

<v-list shaped>
  <v-navigation-drawer>
    <v-list shaped>
      <v-list-item-group
          v-model="selectedItem"
          multiple
      >
        <template v-for="(item, i) in items">
          <!-- value绑定改为索引i -->
          <v-list-item
              :value="i"
              :key="i"
          >
            <v-list-item-title>{{item.text}}</v-list-item-title>
          </v-list-item>
        </template>
      </v-list-item-group>
    </v-list>
  </v-navigation-drawer>
</v-list>

数据逻辑调整

data: () => ({
    // 数组包裹要预选中的索引，直接完成默认选中
    selectedItem: [0],
    drawer: null,
    items: [
      { icon: 'fas fa-home', text: 'Dashboard', route: '/home' },
      { icon: 'fas fa-money-check-alt', text: 'Invoices', route: '/invoices' },
      { icon: 'fas fa-dolly', text: 'Partners', route: '/partners' },
      { icon: 'fas fa-exchange-alt', text: 'Items', route: '/items' },
    ],
  }),

内容的提问来源于stack exchange，提问作者Ladislav Rolnik