在vuetify自动完成中添加带标签的v-icon

Question

我正在使用v-autocomplete，并试图添加一个带有标签的v-icon。有没有一种方法可以让一个带有标签的图标。这就是我试图实现的方式。

<v-autocomplete
:items="availabilities"
@change="selections({availability_id: availability.id})"
v-model="availability"
attach
return-object
label="Availabilities" + <v-icon color="primary">info</v-icon>
item-text='name'
>
</v-autocomplete>

但这行不通。请帮我实现这一点。

Answer 1

尝试使用标签槽，如：

<v-autocomplete
:items="availabilities"
@change="selections({availability_id: availability.id})"
v-model="availability"
attach
return-object
item-text='name'
>
<template #label>
<span>Availabilities <v-icon color="primary">info</v-icon></span>
</template>
</v-autocomplete>

Answer 2

我看到你想要标签后面的图标，我不确定你是否能让它适用于所有浏览器，测试公认的答案在Chrome中似乎很有效，但在Firefox中它显示省略号而不是图标。

查看v-autocomplete的API时。我可能错了，但至少你能做的是，如果你可以接受的话，在标签之前准备图标，设置图标。似乎在Firefox和Chrome中都运行良好(尚未测试其他浏览器(

<v-autocomplete
:items="availabilities"
@change="selections({availability_id: availability.id})"
v-model="availability"
attach
return-object
label="Availabilities"
prepend-icon="info" <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< HERE
item-text='name'
>