Vuetify3 Autocomplete组件自定义选项Tooltip后选项无法点击的问题

嗨，我来帮你搞定这个问题～

你现在遇到的情况是tooltip能正常显示，但选项点不动，核心原因是你在自定义item插槽的时候，只给v-list-item绑定了tooltip激活器的props，却漏掉了Autocomplete组件原本需要的itemProps——这部分props里包含了触发选项选择的点击事件逻辑，没传的话Autocomplete就识别不到你的点击操作啦。

只需要修改一下v-list-item的绑定方式，把tooltip的props和Autocomplete的itemProps合并绑定就行，具体代码如下：

<template>
  <v-autocomplete :items="items" :value="selectedItem">
    <template v-slot:item="data">
      <v-tooltip>
        <template v-slot:activator="{ props }">
          <!-- 合并绑定tooltip的props和Autocomplete的itemProps -->
          <v-list-item v-bind="{ ...props, ...data.itemProps }">
            {{ data.item.title }}
          </v-list-item>
        </template>
        <span>{{ data.item.tooltip }}</span>
      </v-tooltip>
    </template>
  </v-autocomplete>
</template>
<script setup lang="ts">
import { ref } from "vue";

const selectedItem = ref(null);
const items = [
  { title: "Option 1", tooltip: "This is the first option" },
  { title: "Option 2", tooltip: "This is the second option" },
  { title: "Option 3", tooltip: "This is the third option" },
];
</script>

这样修改后，tooltip依然能正常触发，同时点击选项的时候，Autocomplete也能接收到点击事件，完成选中项的更新啦。

备注：内容来源于stack exchange，提问作者Jamie.Sgro