将图像添加到 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>