Contents
Description:
Create multi-select drop-down field with VueJs plugin called vue-next-select. This plugin is simple use, light-weight and with many features. Such as:
Single selectMultiple selectTaggingGroupFiltering / Remote SearchingAsynchronous supportNo dependenciesAims to follow WAI-ARIA for the combobox and listbox widget
How to use it?
1. Install the plugin with npm or yarn.
#npm
npm install vue-next-select
#yarn
yarn add vue-next-select
2. Import the required component in your project, like this:
import { createApp } from ‘vue’
import VueNextSelect from ‘vue-next-select’
3. Now, register the component for further usage.
#Global Registration
const app = createApp({})
app.component(‘vue-select’, VueNextSelect)
#local Registration
const app = Vue.createApp({
components: {
‘vue-select’: VueNextSelect,
},
})
4. In your view, add following:
#In vue-next-select, you need to pass an array of primitive values through an options prop:
<vue-select :options=”[‘Red’, ‘Green’]”> </vue-select>
#The options prop also accepts an array of objects. In this case, you need to pass an additional prop: label-by to display the options
<vue-select :options=”[{ color: ‘Red’ }, { color: ‘Green’ }]” label-by=”color”> </vue-select>
Changelog
All notable changes to this project will be documented in this file.
2.8.0 (2021-07-25)
Features
allow to pass attrs
2.7.1 (2021-07-13)
Bug Fixes
add prevent modifier when hitting “enter” in drop-down
2.7.0 (2021-06-29)
Features
expose remove function for tag slot
Bug Fixes
2.6.0 (2021-06-12)
Features
a11yadd a11y-disabledexpose toggle eventhome/end kbd interactiontype-ahead kbd interaction
Bug Fixes
add aria-disabled, aris-busy to listboxaria-selected indicates that option is selected exact matching keydown wrong cursor
2.5.0 (2021-06-05)
Features
expose maxHeight prop expose openDirection prop
Bug Fixes
the drop-down should only automatically scroll to selected option after open
2.4.4 (2021-06-05)
Bug Fixes
the drop-down should only automatically scroll to selected option after open
2.4.3 (2021-06-04)
Bug Fixes
the drop-down should automatically scroll to selected option
2.4.2 (2021-06-04)
Bug Fixes
computed options prop not works
2.4.1 (2021-05-30)
Bug Fixes
escape searching string
2.4.0 (2021-05-19)
Features
emit consistent event name focus and blur
Bug Fixes
prevent infinite loop
2.3.1 (2021-05-04)
Bug Fixes
it should only fire removed event when there is one selected optionwrong use of teleport
2.3.0 (2021-05-02)
Features
expose loading and toggle slot.
Bug Fixes
stylewrong type validation
2.2.0 (2021-04-30)
Features
a11y
Bug Fixes
update:ModelValue event should be fired synchronously
2.1.1 (2021-04-03)
Bug Fixes
cursor should only be text when input appearsignore case by defaultit should filter if there is no visible-optiontags should ignore groups
2.1.0 (2021-03-30)
Features
group
2.0.1 (2021-03-27)
Bug Fixes
highlight closest option if original is unavailableno syntax downgrade
The post Create Multi-select Drop-down With VueJS 3 – vue-next-select appeared first on Lipku.com.
Permanent link to this post here
