Vue 3 + Vuetify 3中selection插槽显示undefined且无法选值的解决方法

问题核心原因 #

从Vuetify 2迁移到3后，v-autocomplete的属性绑定规则和插槽参数结构发生了变更，导致出现selection插槽显示undefined、无法选择列表项的问题。

具体修复步骤 #

1. 修正item-value和item-title的绑定方式
   Vuetify 3中，这两个属性不再支持直接传入变量名（如userName），需改为字符串形式的属性路径或函数：

• 字符串路径写法（推荐，适合简单场景）：

  :item-value="'userName'"
  :item-title="'userName'"
  

• 函数写法（适合复杂逻辑场景）：

  :item-value="item => item.userName"
  :item-title="item => item.userName"
  

  错误的绑定会导致组件无法正确识别选项值，进而出现选不中项、raw属性undefined的问题。

2. 调整selection插槽的参数结构
   Vuetify 3的selection插槽不再提供item.raw，直接通过item即可获取原始数据对象：

<template #selection="{ item }">
  <div>
    {{ `${item.firstName} ${item.lastName}` }}
    <span class="grey--text">{{ `(${item.userName})` }}</span>
  </div>
</template>

3. 优化item插槽的参数使用（可选）
   item插槽的props.value等价于原始项对象，可直接解构item简化代码：

<template #item="{ item }">
  <div>
    {{ `${item.firstName} ${item.lastName}` }}
    <span class="grey--text">{{ `(${item.userName})` }}</span>
  </div>
</template>

修复后完整代码 #

<v-autocomplete
  :label="label('clientManager', 'pdfExport')"
  v-model="exportOptions.clientManager"
  :items="getClientManager"
  :item-value="'userName'"
  :item-title="'userName'"
  required
  :rules="[rules.required]"
  :loading="loadingUserInfos"
  clearable
  hide-details="auto"
>
  <template #selection="{ item }">
    <div>
      {{ `${item.firstName} ${item.lastName}` }}
      <span class="grey--text">{{ `(${item.userName})` }}</span>
    </div>
  </template>
  <template #item="{ item }">
    <div>
      {{ `${item.firstName} ${item.lastName}` }}
      <span class="grey--text">{{ `(${item.userName})` }}</span>
    </div>
  </template>
</v-autocomplete>

内容的提问来源于stack exchange，提问作者Oliver Henning