我正在使用 vuetify 2.x，我想知道如何為 v-autocomplete 的每個下拉項顯示工具提示。
下拉選單有復選框和文本欄位
<v-autocomplete
solo
:items="..."
v-model="selected"
clearable
multiple
>
</v-autocomplete>
問題-我嘗試使用 v-slot:item 為單個專案撰寫工具提示，但是單擊文本時未單擊復選框所以基本上使用 v-autocomplete 時無法正常作業
誰能告訴我如何解決它，以便復選框作業并且工具提示也顯示？
uj5u.com熱心網友回復：
工具提示與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,
}),
您可以在 CodePen 進行測驗。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/407194.html
標籤：