Universal Multiple Select Component For Vue.js

Description:

A universal multiple select, tagging/tokenizer component for Vue.js 2+ app.

Features:

  • NO dependencies
  • Single select
  • Multiple select
  • Tagging
  • Dropdowns
  • Filtering
  • Search with suggestions
  • Logic split into mixins
  • Basic component and support for custom components
  • V-model support
  • Vuex support
  • Async options support
  • > 95% test coverage
  • Fully configurable

Basic Usage:

<div id="app">
  <multiselect 
    v-model="value" 
    :options="options"
    :multiple="true"
    track-by="library"
    :custom-label="customLabel"
    >
  </multiselect>
  <pre>{{ value }}</pre>
</div>
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 (option) {
      return `${option.library} - ${option.language}`
    }
  }
}).$mount('#app')

Preview:

Universal Multiple Select Component For Vue.js

Download Details:

Author: shentao

Live Demo: https://jsfiddle.net/shentao/jqofkzxc/

Download Link: https://github.com/shentao/vue-multiselect/archive/master.zip

Official Website: https://github.com/shentao/vue-multiselect

Last Update: November 30, 2017

Views Total: 52

Install:

# NPM
$ npm install vue-multiselect --save

# Bower
$ bower install vue-multiselect --save

Add Comment