Добавление изображений в выпадающий список Vue Select?

Question

Я использую vue-select компонент в качестве раскрывающегося списка и даю ему :options в качестве данных для добавления в раскрывающийся список. Я использую его для раскрытия кредитной карты прямо сейчас и хочу добавить изображение типа карты в каждую строку раскрывающегося списка. Это возможно?

Answer 1

Вы можете использовать область option слота , которую vue-select предоставляет для создания пользовательских шаблонов выпадающего меню.

Предполагая, что ваши options данные выглядят так:

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

Тогда вы могли бы использовать это так:

<v-select :options="options" label="title">
  <template slot="option" slot-scope="option">
      <img :src="option.cardImage" />
      {{ option.title }}
  </template>
</v-select>