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 | | disabled | Disable the input | true | 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