时间戳

首页 > 解决方案 > 将图像添加到 Vue Select 下拉菜单？

vue.js - 将图像添加到 Vue Select 下拉菜单？

问题描述

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

标签： vue.jsvue-componentvue-select

解决方案

您可以使用提供创建自定义下拉模板的作用域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>

推荐阅读