在 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

尝试使用 label slot 如：

<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 中它显示省略号而不是图标。

查看 API 时 v-autocomplete。我可能是错的，但至少你可以做的是 prepend 图标，在标签之前设置图标，如果你可以接受的话。似乎在 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'
>

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

Add v-icon with label in vuetify autocomplete

javascript

vue.js

vuetify.js