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

Question

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

下拉框有复选框和文本框

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

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

任何人都可以告诉我如何解决这个问题，以便复选框正常工作并显示工具提示吗？

Answer 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。

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

Show tooltip in v-autocomplete drop-down items in vuetify 2.x

vue.js

vuetify.js