vue-multiselect-component
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.
Dependencies
@babel/core: ^7.12.10@babel/preset-env: ^7.12.11@rollup/plugin-alias: ^3.1.1@rollup/plugin-babel: ^5.2.2@rollup/plugin-commonjs: ^17.0.0@rollup/plugin-node-resolve: ^11.0.1@rollup/plugin-replace: ^2.3.4@vue/cli-plugin-babel: ^4.5.10@vue/cli-plugin-unit-jest: ^4.5.13@vue/cli-service: ^4.5.10@vue/test-utils: ^1.2.0cross-env: ^7.0.3minimist: ^1.2.5rollup: ^2.36.1rollup-plugin-terser: ^7.0.2rollup-plugin-vue: ^5.1.9sass-loader: ^10.1.1vue: ^2.6.12vue-template-compiler: ^2.6.12