vue.jsvuetify.jsv-select

Vuetify v-select with image

I'm using the Vuetify v-select component : https://vuetifyjs.com/en/components/selects/

I want to make select with image like this :

enter image description here

But i didn't found anything in the documentation

Solution

  • You have to use the item slot https://vuetifyjs.com/en/components/selects/#api

    <v-select :items="items" label="Standard">
   <template v-slot:selection="{ item, index }">
      <img :src="item.image">{{ item.name }}
   </template>
   <template v-slot:item="{ item }">
      <img :src="item.image">{{ item.name }}
   </template>
</v-select>

    JS:

    new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [
      { name: 'Foo', image: 'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG'},
      { name: 'Bar', image: 'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG'},
      { name: 'Hoo', image: 'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG'},
      { name: 'Coo', image: 'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG'}],
  }),
})

    JSFiddle: https://codepen.io/reijnemans/pen/vYNadMo?editors=1010