Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add an icon in front of every VuetifyJS combobox entry?

I'm using the combobox component of VuetifyJS and I need to add an icon in front of every entry in the drop down. How to do that? Here is a CodePen example of the combobox: https://codepen.io/anon/pen/KBLXYO

HTML

 <div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-layout wrap>
        <v-flex xs12>
          <v-combobox
            v-model="select"
            :items="items"
            label="Select a favorite activity or create a new one"
          ></v-combobox>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

JS:

 new Vue({
  el: '#app',
  data () {
    return {
      select: 'Programming',
      items: [
        'Programming',
        'Design',
        'Vue',
        'Vuetify'
      ]
    }
  }
})
like image 661
Tom Avatar asked Jan 27 '23 14:01

Tom


1 Answers

Use the item scoped slot.

<v-combobox
  v-model="select"
  :items="items"
  label="Select a favorite activity or create a new one">

  <template slot="item" slot-scope="data">
    <v-icon>home</v-icon>  {{data.item}}
  </template>

</v-combobox>

Here is your pen updated.

FWIW, this is all covered in the documentation.

like image 144
Bert Avatar answered Jan 31 '23 22:01

Bert