A customizable and searchable dual list box component to enhance multi-select experience on the app.
1. Import the Multi-Select Dual List Box.
import Vue from 'vue'
import MultiselectListbox from 'vue-multiselect-listbox'
import 'vue-multiselect-listbox/dist/vue-multi-select-listbox.css';
2. Register the component.
Vue.component('v-multiselect-listbox', vMultiselectListbox)
3. Add the component to the template and define the options in a JS array or an array of objects.
<v-multiselect-listbox
:options="['Option 1', 'Option 2']">
</v-multiselect-listbox>
// or
<v-multiselect-listbox
:options="[{label: 'Option 1', language: 'js'}, {label: 'Option 2', language: 'css'}]"
:reduce-display-property="(option) => option.label"
:reduce-value-property="(option) => option.language"
</v-multiselect-listbox>
4. All possible props.
value: {
type: Array,
default() {
return [];
},
},
options: {
type: Array,
default() {
return [];
},
},
searchOptionsPlaceholder: {
type: String,
default() {
return 'Search';
},
},
selectedOptionsPlaceholder: {
type: String,
default() {
return 'Search';
},
},
reduceDisplayProperty: {
type: Function,
default: (value) => value,
},
reduceValueProperty: {
type: Function,
default: (value) => value,
},
noOptionsText: {
type: String,
default: '',
},
selectedNoOptionsText: {
type: String,
default: 'Select',
},
noOptionsFoundText: {
type: String,
default: 'No options found',
},
noSelectedOptionsFoundText: {
type: String,
default: 'No options found',
},
showSelectAllButtons: {
type: Boolean,
default: true,
},
searchInputClass: {
type: String,
default: '',
}
Author: abhimediratta
Official Website: https://github.com/abhimediratta/vue-multiselect-listbox
#vuejs #javascript #vue #vue-js