使用 vue-select 选择图像

Question

如何在 vue 3 中使用 vue-select 进行选择？

<v2-select :options="options" label="title">
   <template slot="option" slot-scope="option">                              
   <img :src="option.url">
  {{ option.url }}
  </template>
</v2-select>

数据：

 options: [
                    {
                        title: 'Read the Docs',
                        icon: 'fa-book',
                        url: 'https://codeclimate.com/github/sagalbot/vue-select'
                    },
                    {
                        title: 'View on GitHub',
                        icon: 'fa-github',
                        url: 'https://codeclimate.com/github/sagalbot/vue-select'
                    },
                    {
                        title: 'View on NPM',
                        icon: 'fa-database',
                        url: 'https://codeclimate.com/github/sagalbot/vue-select'
                    },
                    {
                        title: 'View Codepen Examples',
                        icon: 'fa-pencil',
                        url: 'https://codeclimate.com/github/sagalbot/vue-select'
                    }
                ],
    }

示例： https://stackblitz.com/edit/vue-5ni27c?file=src%2FApp.vue,package.json,src%2Fcomponents%2FHelloWorld.vue

在 vue 2 中可以工作，机器人在 vue 3 中不行

Answer 1

您的插槽绑定错误。

检查文档：Vue - 命名插槽和Vue-Select - 插槽 - 选项

这个

 <template slot="option" slot-scope="option">   

应该这么写

<template v-slot:option="option">

左右（使用简写

#

）

<template #option="option">

然后就可以了：

更新：

slot-scope

在 Vue2 中已弃用

Answer 2

使用以下版本

"vue-select": "^4.0.0-beta.5"

并像

main.js

那样安装

import { createApp } from "vue"
import vSelect from "vue-select"

import App from "./App.vue"
const app = createApp(App)
app.component("v-select", vSelect)

app.mount("#app")

然后您可以使用以下内容

<template>
  <v-select :options="options" label="title">
    <template #option="option">
      <span><img :src="option.image" />{{ option.title }}</span>
    </template>
  </v-select>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          title: "Read the Docs",
          image: "https://source.unsplash.com/random/20x20?sig=1",
          url: "https://codeclimate.com/github/sagalbot/vue-select",
        },
        {
          title: "View on GitHub",
          image: "https://source.unsplash.com/random/20x20?sig=2",
          url: "https://codeclimate.com/github/sagalbot/vue-select",
        },
        {
          title: "View on NPM",
          image: "https://source.unsplash.com/random/20x20?sig=3",
          url: "https://codeclimate.com/github/sagalbot/vue-select",
        },
        {
          title: "View Codepen Examples",
          image: "https://source.unsplash.com/random/20x20?sig=4",
          url: "https://codeclimate.com/github/sagalbot/vue-select",
        },
      ],
    };
  },
};
</script>

为了这样的结果

---

PS：请小心，文档中的一些示例确实不是关于 Vue API 的最新内容，尤其是

slot-scope

，如此处解释（在 Vue3 中不再可用）。