1. vue-multiselect-component

vue-multiselect-component

Multiselect component for Vue 2

A multiselect component with support for Vue 2

Install & basic usage

img.png

 $ 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.