Adding images to Vue Select dropdown?

vue.js vue-component vue-select
RohimL picture RohimL · Apr 2, 2019 · Viewed 7.3k times · Source

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?

Answer

Ana Liza Pandac picture Ana Liza Pandac · Apr 2, 2019

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>

Related questions

Import vue package in laravel

What is the corect way to import vue packages in laravel 5.6? It comes with vue and bootstrap preinstall. I see they are all compile in app.js from public directory but I can figure out how to import https://github.…

Read More
Vue.js - How to properly watch for nested data

I'm trying to understand how to properly watch for some prop variation. I have a parent component (.vue files) that receive data from an ajax call, put the data inside an object and use it to render some child component …

Read More
How to listen for 'props' changes

In the VueJs 2.0 docs I can't find any hooks that would listen on props changes. Does VueJs have such hooks like onPropsUpdated() or similar? Update As @wostex suggested, I tried to watch my property but nothing changed. Then I realized …

Read More