Vue-multiselect
Example fiddle for issue reproduction usage
HTML
<script src="https://unpkg.com/vue-multiselect@2.1.2/dist/vue-multiselect.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.2/dist/vue-multiselect.min.css">
<div id="app">
<multiselect
v-model="selected"
placeholder="Select one"
label="title" track-by="title"
:options="options"
:option-height="104"
:custom-label="customLabel"
:show-labels="false">
<template slot="singleLabel" slot-scope="props">
<img class="option__image"
:src="props.option.img" alt="No Man’s Sky">
<span class="option__desc">
<span class="option__title">
{{ props.option.title }}
</span>
</span>
</template>
<template slot="option" slot-scope="props">
<img class="option__image" :src="props.option.img"
alt="No Man’s Sky">
<div class="option__desc">
<span class="option__title">
{{ props.option.title }}
</span>
<span class="option__small">
{{ props.option.desc }}
</span>
</div>
</template>
</multiselect>
<br/><br/>
<div>
Tag Selected: {{ selected }}
</div>
</div>
CSS
img {
width: 100px;
}
.option__desc {
width: 75%;
float: right;
display: flex;
flex-direction: column;
margin: 10px 0 0 10px;
}
Babel + JSX
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
data: {
selected: null,
options: [
{
title: 'Space Pirate',
desc: 'More space battles!',
img: 'https://pbs.twimg.com/media/C6b5SETWcAEQJkV.jpg'
},
{
title: 'Merchant',
desc: 'PROFIT!',
img: 'https://i.pinimg.com/originals/3c/7a/fc/3c7afc1b68c0f8cc367dd9d0f1f383de.jpg'
},
{
title: 'Explorer',
desc: 'Discovering new species!',
img: 'https://3.bp.blogspot.com/-2wmDrFmRJm4/WU4XZg6H-6I/AAAAAAAAEjI/df216RIbW7YsmeFuN1t-Uwd7eF22_9VqgCLcBGAs/s1600/tut-shinkaifoto.jpg'
},
{
title: 'Miner',
desc: 'We need to go deeper!',
img: 'http://orig15.deviantart.net/3c10/f/2013/307/3/8/outdoor_hallway_by_mclelun-d6suhm2.jpg'
}
]
},
methods: {
customLabel ({ title, desc }) {
return `${title} – ${desc}`
}
}
}).$mount('#app')