CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
user12763413
user12763413

Reputation: 1347

Add v-icon with label in vuetify autocomplete

I am using v-autocomplete and I am trying to add a v-icon with the label. Is there a way to have a icon with the label. this is how I am trying to implement.

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

But this doesn't work. Please help me achieve this.

Upvotes: 0

Views: 4122

Answers (2)

AVJT82
AVJT82

Reputation: 73337

I see you want the icon after the label, I'm not sure if you can make it so it works for all browsers, testing the accepted answer seems to work well in Chrome, but in Firefox it shows ellipsis instead of the icon.

When looking at the API for v-autocomplete. I could be wrong, but at least what you can do, is to prepend the icon, set the icon before label, if that is acceptable for you. Seems to be working fine in both Firefox and Chrome (haven't tested other browsers)

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

Upvotes: 1

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Try out to use the label slot like :

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

Upvotes: 1

Related Questions