JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
<div id="app">
<multiselect
v-model="value"
:options="options"
track-by="library"
:custom-label="customLabel"
:show-labels="false"
>
</multiselect>
<pre>{{ value }}</pre>
</div>
CSS
* {
font-family: 'Lato', 'Avenir', sans-serif;
}
.multiselect {
width: fit-content
}
.multiselect__content-wrapper, .multiselect__element {
width: fit-content;
}
.multiselect__option {
width: 100%;
}
JavaScript
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
data: {
value: { language: 'JavaScript', library: 'Vue-Multiselect' },
options: [
{ language: 'JavaScript', library: 'Vue.js' },
{ language: 'JavaScript', library: 'Vue-Multiselect 12345' },
{ language: 'JavaScript', library: 'Vuelidate' }
]
},
methods: {
customLabel (option) {
return `${option.library} - ${option.language}`
}
}
}).$mount('#app')