vue3-two-side-multiple-select

vue3-two-side-multiple-select

A MultiSelect with two lists for Vue.js v.3, searchable, sorting and action buttons.

enable group list move and remove

Install npm

npm install vue3-two-side-multiple-select --save

Import and use

Import for global usage

import { createApp } from 'Vue'
import MultipleSelect from 'vue3-two-side-multiple-select'
import App from "./App"

const app = createApp(App)
app.component('multiple-select', MultipleSelect)
app.mount('#app')
...

Or on a single component

import MultipleSelect from 'vue3-two-side-multiple-select'
...
},
components: { MultipleSelect }
...

Props

Events

How to use

After you have installed the package and imported it, call the component's html and pass its properties.

<multiple-select
  :items="arrayOfItems"
  :selectedItems="arrayOfSelectedtems"
  :searchable="true"
  :disabled="false"
  :sorteable="true"
  :orderBy="'name'"
  :showTextSelectedItem="true"
  :limitSelectedItems="999"
  text-field="name"
  value-field="id"
  ></multiple-select>

arrayOfItems: [
    {
        id: 1,
        name: 'Bitcoin',
        children: [
            {
                id: 22,
                name: 'Bitcoin2'
            },
            {
                id: 23,
                name: 'Bitcoin3',
                disabled: true
            },
            {
                id: 24,
                name: 'Bitcoin4'
            },
            {
                id: 25,
                name: 'Bitcoin5'
            },
            {
                id: 26,
                name: 'Bitcoin6'
            }
        ]
    },
    {
        id: 2,
        name: 'Ethereum',
        disabled: true
    },
    {
        id: 3,
        name: 'Ripple'
    }

Rtl is available when the body has the class is-rtl

<body class="is-rtl"></body>

Contributing

To contribute to this project you can clone the repository and run the npm run dev command to test.

npm install

npm run dev

npm publish