Search code examples
javascriptvue.jscomboboxvuetify.js

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'
      ]
    }
  }
})

Solution

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