[SOLVED] Adding images to Vue Select dropdown?

Adding images to Vue Select dropdown?

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?

Solution

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>