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

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


vue.js vue-component vue-select
person RohimL    schedule 02.04.2019    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Вы можете использовать слот 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>
person Ana Liza Pandac    schedule 02.04.2019
comment
это именно то, что я искал. Огромное спасибо! - person RohimL; 02.04.2019
comment
Ана, вопрос. Это отлично работает для отображения изображений рядом с раскрывающимся списком, но при выборе варианта раскрывающегося списка выбранный теряет изображение - person RohimL; 02.04.2019
comment
@RohimL До сих пор я работал только с добавлением изображений в раскрывающийся список. Я не уверен, что вы также можете настроить выбранную опцию. Пока я не видел никаких опор, которые мы могли бы использовать для этого. - person Ana Liza Pandac; 03.04.2019