Question

我正在使用 v-autocomplete 并且我正在尝试添加带有标签的 v 图标。有没有办法让图标带有标签。这就是我正在尝试实施的方式。

const [elements, setElements] = useState(null);

但这行不通。请帮助我实现这一目标。

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

查看 v-autocomplete 的 API 时。我可能是错的，但至少你能做的是 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

2 个答案: