Блог

Главная - Вопросы по программированию - Добавьте v-образный значок с меткой в автозаполнение vuetify

Добавьте v-образный значок с меткой в автозаполнение vuetify

#javascript #vue.js #vuetify.js

Вопрос:

Я использую v-автозаполнение и пытаюсь добавить v-образный значок с надписью. Есть ли способ иметь значок с надписью. вот как я пытаюсь это реализовать.

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

Но это не работает. Пожалуйста, помогите мне достичь этого.

Ответ №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>

Комментарии:

1. Попробовал, кажется, не работает… codepen.io/AJT82/pen/qBRQjWQ?editors=1010

2. Это работает, где вы хотите разместить иконку?

3. @Буссаджрабрахим, хорошо… по-видимому, работает в Chrome, в Firefox он просто показывает эллипсы, кажется, по крайней мере для меня.

Ответ №2:

Я вижу, вам нужен значок после метки, я не уверен, сможете ли вы сделать так, чтобы он работал для всех браузеров, тестирование принятого ответа, похоже, хорошо работает в Chrome, но в Firefox вместо значка отображается многоточие.

При взгляде на API для v-autocomplete . Я могу ошибаться, но, по крайней мере, что вы можете сделать, это добавить значок, установить значок перед меткой, если это приемлемо для вас. Кажется, все нормально работает как в 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'
>
Метки: