https://github.com/shentao/vue-multiselect

Universal select/multiselect/tagging component for Vue.js
https://github.com/shentao/vue-multiselect

component dropdown javascript select vue

Last synced: 6 days ago
JSON representation

Universal select/multiselect/tagging component for Vue.js

• Host: GitHub
• URL: https://github.com/shentao/vue-multiselect
• Owner: shentao
• License: mit
• Created: 2016-04-23T13:02:33.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2024-09-13T15:08:36.000Z (3 months ago)
• Last Synced: 2024-10-29T10:45:14.919Z (about 2 months ago)
• Topics: component, dropdown, javascript, select, vue
• Language: JavaScript
• Homepage: https://vue-multiselect.js.org/
• Size: 15.8 MB
• Stars: 6,713
• Watchers: 102
• Forks: 989
• Open Issues: 323
• Metadata Files:
  • Readme: README.md
  • Funding: .github/funding.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome - shentao/vue-multiselect - Universal select/multiselect/tagging component for Vue.js (JavaScript)

README

        
# vue-multiselect

## Documentation for version 3

Documentation for v3.0.0 is almost the same as for v2.x as it is mostly backward compatible. For the full docs for v3 and previous versions, check out: [vue-multiselect.js.org](https://vue-multiselect.js.org/#sub-getting-started)

## Sponsors



  

    

  





  

    

  





  

    

  





  

    

  



## Features & characteristics:

* NO dependencies

* Single select

* Multiple select

* Tagging

* Dropdowns

* Filtering

* Search with suggestions

* Logic split into mixins

* Basic component and support for custom components

* V-model support

* Vuex support

* Async options support

* Fully configurable (see props list below)

## Install & basic usage

```bash

npm install vue-multiselect@next

```

```vue

  


    

    

  


import VueMultiselect from 'vue-multiselect'

export default {

  components: { VueMultiselect },

  data () {

    return {

      selected: null,

      options: ['list', 'of', 'options']

    }

  }

}

```

## JSFiddle

[Example JSFiddle](https://jsfiddle.net/mattelen/8cyt3hrn/5/) – Use this for issue reproduction.

## Examples

### Single select / dropdown

```vue

```

### Single select with search

```vue

```

### Multiple select with search

```vue

```

### Tagging

with `@tag` event

```vue

```

``` javascript

addTag (newTag) {

  const tag = {

    name: newTag,

    code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))

  }

  this.taggingOptions.push(tag)

  this.taggingSelected.push(tag)

},

```

### Asynchronous dropdown

```vue

  

    Oops! No elements found. Consider changing the search query.

  

```

``` javascript

methods: {

  asyncFind (query) {

    this.countries = findService(query)

  }

}

```

## Special Thanks

Thanks to Matt Elen for contributing this version!

> A Vue 3 upgrade of [@shentao's](https://github.com/shentao) [vue-mulitselect](https://github.com/shentao/vue-multiselect) component. The idea is that when you upgrade to Vue 3, you can swap the two components out, and everything should simply work. Feel free to check out our story of how we upgraded our product to Vue 3 on our blog at  [suade.org](https://suade.org/a-products-vue-3-migration-a-real-life-story/)

## Contributing

``` bash

# distribution build with minification

npm run bundle

# run unit tests

npm run test

```