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

将图像添加到 Vue Select 下拉列表？

Adding images to Vue Select dropdown?

vue.js

vue-component

vue-select