Vuetify 3 Beta中v-select的item-title无法支持多输入问题

我定义了如下数据：

projects: {id: number, name: string, customer: string}[] = 
[
    {id:0,name:'foo',customer:'bar'},
    {id:1,name:'foo2',customer:'bar2'}
]

想要构建一个v-select组件，让选项的标题显示customer + "/" + name的组合内容。根据Vuetify文档，原本以为可以通过传入数组或拼接字符串的方式实现，但实际尝试后并不生效。

以下写法可以正常工作：

<v-select
          :items="projects"
          item-title="name"
          return-object
          label="Select project"
     >
<!-- 或者 -->
 <v-select
          :items="projects"
          item-title=""
          return-object
          label="Select project"
     >

但以下传入数组或拼接字符串的写法无法生效：

<v-select
          :items="projects"
          item-title="[name,customer]"
          return-object
    >
<!-- 或者 -->
 <v-select
          :items="projects"
          item-title="customer+name"
          return-object
    >

方法1：使用自定义item插槽（最灵活） #

通过自定义插槽完全控制选项的显示内容，同时还能自定义选中后的展示样式：

<v-select
  :items="projects"
  return-object
  label="Select project"
>
  <template v-slot:item="{ item }">
    <div>{{ item.customer }}/{{ item.name }}</div>
  </template>
  <template v-slot:selection="{ item }">
    {{ item.customer }}/{{ item.name }}
  </template>
</v-select>

方法2：预处理数据添加组合字段 #

在计算属性中给每个项目新增一个组合后的标题字段，再绑定到item-title：

// 组件的计算属性
computed: {
  formattedProjects() {
    return this.projects.map(project => ({
      ...project,
      displayTitle: `${project.customer}/${project.name}`
    }))
  }
}

模板中使用处理后的数组：

<v-select
  :items="formattedProjects"
  item-title="displayTitle"
  return-object
  label="Select project"
>
</v-select>

方法3：绑定函数到item-title（Vuetify 3适用） #

如果使用Vuetify 3，可以直接给item-title绑定一个返回组合字符串的函数：

<v-select
  :items="projects"
  :item-title="item => `${item.customer}/${item.name}`"
  return-object
  label="Select project"
>
</v-select>

内容的提问来源于stack exchange，提问作者Daniël Lizarazo Fuentes