CODEWITHSUNDEEP
vue.jsvuejs2
EmilM
EmilM

Reputation: 137

Adding image and text to Vue Select dropdown

I want to make dropdowns with text and a picture. I wrote the code as written in the manual, here is the link https://vue-select.org/guide/slots.html

Help me please.

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



options: [{
    title: "country1",
    cardImage: "images/flag-20.png"

},
{
    title: "country2",
    cardImage: "images/flag``-21.png"

}
]

Upvotes: 1

Views: 3048

Answers (1)

sdn404
sdn404

Reputation: 624

i think the locations of cardImage are not right. check this:

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
    options: [{
    title: "country1",
    cardImage: "https://via.placeholder.com/20"

},
{
    title: "country2",
    cardImage: "https://via.placeholder.com/20"

}
]
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <v-select :options="options" label="title">
    <template slot="option" slot-scope="option">
        <img :src="option.cardImage">
        {{ option.title }}
    </template>
  </v-select>
</div>

Upvotes: 1

Related Questions