The Most Complete Selecting Solution For Vue.js – vue-multiselect

Install & Download:

npm install vue-multiselect

Description:

A universal select/multi select/tagging component for Vue.js 1.x, 2.x, and 3.x.

Features & characteristics:

• NO dependencies
• Single select
• Multiple select
• Tagging
• Custom option templates (1.1.0+)
• Dropdowns
• Filtering
• Search with suggestions
• Logic split into mixins
• Basic component and support for custom components
• Vuex support
• Async options support
• > 99% test coverage
• Fully configurable (see props list below)

Basic usage:

1. Import the component.

import Multiselect from 'vue-multiselect'

2. In your app template:

<template>
  <div>
    <multiselect
      v-model="selected"
      :options="options">
    </multiselect>
  </div>
</template>

3. Register the component and define an array of options for the multi select.

export default {
  components: { Multiselect },
  data () {
    return {
      selected: null,
      options: ['vue', 'script', 'com']
    }
  }
}

4. Available props to customize the multi select component.

/**
 * name attribute to match optional label element
 * @default ''
 * @type {String}
 */
name: {
  type: String,
  default: ''
},
/**
 * String to show when pointing to an option
 * @default 'Press enter to select'
 * @type {String}
 */
selectLabel: {
  type: String,
  default: 'Press enter to select'
},
/**
 * String to show when pointing to an option
 * @default 'Press enter to select'
 * @type {String}
 */
selectGroupLabel: {
  type: String,
  default: 'Press enter to select group'
},
/**
 * String to show next to selected option
 * @default 'Selected'
 * @type {String}
 */
selectedLabel: {
  type: String,
  default: 'Selected'
},
/**
 * String to show when pointing to an already selected option
 * @default 'Press enter to remove'
 * @type {String}
 */
deselectLabel: {
  type: String,
  default: 'Press enter to remove'
},
/**
 * String to show when pointing to an already selected option
 * @default 'Press enter to remove'
 * @type {String}
 */
deselectGroupLabel: {
  type: String,
  default: 'Press enter to deselect group'
},
/**
 * Decide whether to show pointer labels
 * @default true
 * @type {Boolean}
 */
showLabels: {
  type: Boolean,
  default: true
},
/**
 * Limit the display of selected options. The rest will be hidden within the limitText string.
 * @default 99999
 * @type {Integer}
 */
limit: {
  type: Number,
  default: 99999
},
/**
 * Sets maxHeight style value of the dropdown
 * @default 300
 * @type {Integer}
 */
maxHeight: {
  type: Number,
  default: 300
},
/**
 * Function that process the message shown when selected
 * elements pass the defined limit.
 * @default 'and * more'
 * @param {Int} count Number of elements more than limit
 * @type {Function}
 */
limitText: {
  type: Function,
  default: count => `and ${count} more`
},
/**
 * Set true to trigger the loading spinner.
 * @default False
 * @type {Boolean}
 */
loading: {
  type: Boolean,
  default: false
},
/**
 * Disables the multiselect if true.
 * @default false
 * @type {Boolean}
 */
disabled: {
  type: Boolean,
  default: false
},
/**
 * Fixed opening direction
 * @default ''
 * @type {String}
 */
openDirection: {
  type: String,
  default: ''
},
/**
 * Shows slot with message about empty options
 * @default true
 * @type {Boolean}
 */
showNoOptions: {
  type: Boolean,
  default: true
},
showNoResults: {
  type: Boolean,
  default: true
},
tabindex: {
  type: Number,
  default: 0
}

Preview:

Changelog:

v2.1.8 (01/30/2024)

• Fix: null.blur() on special occasions