在 vuetify 2.x 的 v-autocomplete 下拉项中显示工具提示

【问题标题】：Show tooltip in v-autocomplete drop-down items in vuetify 2.x在 vuetify 2.x 的 v-autocomplete 下拉项中显示工具提示
【发布时间】：2022-01-08 17:43:45
【问题描述】：

我正在使用 vuetify 2.x，我想知道如何为 v-autocomplete 的每个下拉项显示工具提示。

下拉菜单有复选框和文本框

<v-autocomplete
solo
:items="..."
v-model="selected"
clearable
multiple
>
</v-autocomplete>

问题- 我尝试使用 v-slot:item 为单个项目编写工具提示，但是单击文本时未单击该复选框所以基本上 v-autocomplete 在使用时无法正常工作

谁能告诉我如何解决它，以便复选框和工具提示显示？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

工具提示适用于 v-slot:item。例如，这样：

<v-autocomplete
  v-model="values"
  :items="items"
  solo
  clearable
  multiple>
  <template #item="data">
    <v-tooltip bottom>
      <template #activator="{ on, attrs }">
        <v-layout wrap v-on="on" v-bind="attrs">
          <v-list-item-action>
            <v-checkbox v-model="data.attrs.inputValue"/>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>{{data.item}}</v-list-item-title>
          </v-list-item-content>
        </v-layout>
      </template>
      <span>{{ `${data.item} tooltip` }}</span>
    </v-tooltip>
  </template>
</v-autocomplete>

...

data: () => ({
  items: ['foo', 'bar', 'fizz', 'buzz'],
  values: ['foo', 'bar'],
  value: null,
}),

你可以测试这个at CodePen。

【讨论】：