# vue-multiselect-cmp

> A multiselect component with support for Vue

Latest version **1.9.6** (published 2022-07-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-multiselect-cmp
pnpm add vue-multiselect-cmp
yarn add vue-multiselect-cmp
bun add vue-multiselect-cmp
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.9.6 |
| Published | 2022-07-05 |
| First published | 2021-12-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 117.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | adoperatormedia |
| Maintainers | adoperatormedia |
| Keywords | js, vue, vue2, multiselect, select |

## Links

- npm: https://www.npmjs.com/package/vue-multiselect-cmp
- Repository: https://github.com/adoperator/vue-multiselect-component
- Homepage: https://adoperator.github.io/vue-multiselect-component/
- Issues: https://github.com/adoperator/vue-multiselect-component/issues
- npm.io page: https://npm.io/package/vue-multiselect-cmp

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.9.6 (latest) — 2022-07-05
- 1.9.5 — 2022-07-04
- 1.9.4 — 2022-07-04
- 1.9.3 — 2022-02-16
- 1.9.2 — 2022-02-15
- 1.9.1 — 2022-02-15
- 1.9.0 — 2022-02-15
- 1.8.9 — 2022-02-15
- 1.8.8 — 2022-02-15
- 1.8.7 — 2022-02-15
- 1.8.6 — 2022-02-15
- 1.8.5 — 2022-02-15
- 1.8.4 — 2022-02-15
- 1.8.3 — 2022-02-15
- 1.8.2 — 2022-02-15
- … 50 more at https://npm.io/package/vue-multiselect-cmp/versions

## README

# Multiselect component for Vue 2

A multiselect component with support for Vue 2

## Install & basic usage

![img.png](docs/img.png)

```shell
$ npm install vue-multiselect-component
```

```vue
<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   |
| disabled             | Disable the input                                                                  | true     | 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_

---
_Source: https://npm.io/package/vue-multiselect-cmp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._