7

I am using vue-select component as my dropdowns and giving it :options as the data to put in the dropdown. I am using it for a credit card dropdown right now and want to add the card type image in in each dropdown row. Is this possible?

RohimL
  • 157
  • 1
  • 3
  • 13

1 Answers1

11

You could use the scoped option slot that vue-select provides for creating custom dropdown templates.

Assuming that your options data looked like this:

options: [
  {
    title: "Visa",
    cardImage: "https://codeclimate.com/github/sagalbot/linktoimage.png"
  },
  {
    title: "Mastercard",
    cardImage: "https://codeclimate.com/github/sagalbot/linktoimage.png"
  }
];

Then you could use it as such:

<v-select :options="options" label="title">
  <template slot="option" slot-scope="option">
      <img :src="option.cardImage" />
      {{ option.title }}
  </template>
</v-select>
Ana Liza Pandac
  • 4,795
  • 2
  • 24
  • 36
  • 1
    this is exactly what I was looking for. Thanks so much! – RohimL Apr 02 '19 at 16:27
  • Ana, question. This works great to display images next to the dropdown but when selecting the dropdown option, the selected one loses the image – RohimL Apr 02 '19 at 17:01
  • 1
    @RohimL So far, I've only worked with adding images to the dropdown. I'm not sure if you can customize the selected option as well. So far I didn't see any props that we could use to do this. – Ana Liza Pandac Apr 03 '19 at 15:01
  • 1
    You can use the selected-option slot to include an image in the selected item. ```lang-xml ``` – tgraupmann Nov 10 '21 at 21:27