Multiselect component for Vue 2

A multiselect component with support for Vue 2

Install & basic usage

$ npm install vue-multiselect-component

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

<script>
import VueMultiselectComponent from 'vue-multiselect-component'

export default {
  components: {
    VueMultiselectComponent
  },
  data() {
    return {
      selected: [],
      options: [
        { id: 'ru', label: 'Russia' },
        { id: 'nl', label: 'Netherlands' },
        { id: 'fr', label: 'France' }
      ]
    }
  }
}
</script>

Props

|Props|Description|Required|Type|Default| |-----|-----------|--------|----|-------| |value (v-model)|Selected items|true|Array|-| |options|List of all items|true|Array|-| |writable|The ability to write in the input field|false|Boolean|true| |searchable|Standard element search (only for writable = true)|false|Boolean|true| |placeholder|Input placeholder|false|String|-| |loading|Options list standby mode|false|Boolean|false| |limit|Limit the number of visible items when the options list is closed|false|Number|10| |label-text|The name of the field in the options array, which should be in the label|false|String|label| |placeholder-as-label|Make a placeholder as a label that will be displayed at the top of the input field|false|Boolean|false|

*will be complemented

Events

|Event|Description|Attributes| |-----|-----------|-----| |search-change|Called whenever the search field has changed|(search-query)| |input|Called whenever the value changes passing the new value|(value-list)| |selected|Called whenever an element is selected|(id)| |removed|Called whenever an element is removed|(id)| |open|Called whenever the list is opened|-| |close|Called whenever the list is closed|-|

*will be complemented

License

Copyright (c) 2021-present Anatoliy Vasilyev.

Released under the MIT License.