Vue-multiselect

Example fiddle for issue reproduction usage

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-multiselect.min.js"></script>
<div id="app">
  <multiselect v-model="value" track-by="library" placeholder="Select one" :options="options" :allow-empty="false" :show-labels="false">
  
    <template slot="singleLabel" slot-scope="{ option }">
      <strong>{{ option.library }}</strong> is written in<strong>  {{ option.language }}</strong>
    </template>
    
    
    
    
    
    <template slot="option" slot-scope="{ option }">
    {{ option.library }}
    </template>
  <span slot="noResult">No results found</span>
  </multiselect>
  <pre>{{ value }}</pre>
</div>

CSS

* {
  font-family: 'Lato', 'Avenir', sans-serif;
}

Babel + JSX

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' },
      { language: 'JavaScript', library: 'Vuelidate' }
    ]
	},
  methods: {
  	customLabel ({ library, language }) {
      return `${library} - ${language}`
    }
  }
}).$mount('#app')