Create Multi-select Drop-down With VueJS 3 – vue-next-select

Category: Vue.js Vue.js Form | July 26, 2021
Author: iendeavor
Official Page: Go to website
Last Update: July 27, 2021
License: MIT

vue-next-select drop-down

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 select
  • Multiple select
  • Tagging
  • Group
  • Filtering / Remote Searching
  • Asynchronous support
  • No dependencies
  • Aims 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

  • a11y
  • add a11y-disabled
  • expose toggle event
  • home/end kbd interaction
  • type-ahead kbd interaction

Bug Fixes

  • add aria-disabled, aris-busy to listbox
  • aria-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 option
  • wrong use of teleport

2.3.0 (2021-05-02)

Features

  • expose loading and toggle slot.

Bug Fixes

  • style
  • wrong 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 appears
  • ignore case by default
  • it should filter if there is no visible-option
  • tags 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 unavailable
  • no syntax downgrade