要在Vue Select下拉菜单中添加图片？

Question

我将vue-select组件用作我的下拉列表，并将其:options用作要放入下拉列表的数据。我现在将其用于信用卡下拉列表，并希望在每个下拉列表行中添加卡类型图像。这可能吗？

Answer 1

您可以使用vue-select提供的scoped option slot来创建自定义下拉模板。

假设您的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>