Select images with vue-select

Question

How will I do select with vue-select in vue 3?

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

Data:

 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'
                    }
                ],
    }

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

In vue 2 it work, bot in vue 3 dont

Tolbxela · Accepted Answer · 2022-11-03T11:56:58.070

2

Your slot binding is wrong.

Check the Docs: Vue - Named Slots and Vue-Select - Slots - option

This

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

should be written so

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

or so (using the shorthand #)

<template #option="option">

Then it works:

UPDATE:

slot-scope was deprecated in Vue2

edited Nov 03 '22 at 11:56

answered Oct 28 '22 at 18:31

Tolbxela

4,767
3
21
42

score 2 · Answer 2 · answered Oct 28 '22 at 22:12

Using the following version

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

And installing like that in 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")

You can then use the following

<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>

For this kind of result

PS: be careful, some examples in the documentation are indeed not up to date regarding Vue's API, especially slot-scope as explained here (not available anymore in Vue3).

Select images with vue-select

2 Answers2