Vue 3 Multiselect Dropdown Component

Back in jQuery/Bootstrap days there was a plugin for multi-select dropdown form element, where you expand the list and check on desired items. But these days most of multi-select plugins are using tags to select the items. Since I’m more comfortable with checkboxes and there was no suitable plugin, I decided to build my own and publish it on www.npmjs.com

As plugin’s readme says you can easily install that plugin with npm

npm i vue3-multiselect-checkboxed

If you going to use it locally just do following (this is a setup script example):

<script setup>
import { Vue3MultiselectCheckboxed } from "vue3-multiselect-checkboxed"
import "vue3-multiselect-checkboxed/style.css"
import { ref } from 'vue'
const result = ref(['AF', 'AL'])
const setResult = (val) => {
  result.value = [...val]
}
const countryListAllIsoData = [
  { code: 'AF', code3: 'AFG', name: 'Afghanistan', number: '004' },
  { code: 'AL', code3: 'ALB', name: 'Albania', number: '008' },
  { code: 'DZ', code3: 'DZA', name: 'Algeria', number: '012' },
  { code: 'AS', code3: 'ASM', name: 'American Samoa', number: '016' },
]
</script>

You will need to have function setResult() to set the results within your current component, emitted from the multi-select plugin

...
const setResult = (val) => {
  result.value = [...val]
}

The template part will be something like that:

<template>
  <div>
    <Vue3MultiselectCheckboxed
      :options="countryListAllIsoData"
      bindLabel="name"
      bindValue="code"
      :preSelected="result"
      :hasSearch="true"
      @onVSelect="setResult"
    />
  </div>
</template>

Parameters bindLabel=”name” and bindValue=”code” are to bind the properties of you object in provided array. In the example above I’m using a country array countryListAllIsoData with binding “code” (two letters country code) as the value. If I change to bindValue=”code3” the selectable values will be 3 letter country code.

Search can be disabled by setting :hasSearch=”true” to false. Disabling search wakes sense if there are only few items

To have some items pre-selected use preSelected property

:preSelected="result"

This could be any other array, not the just resulting result, since there is no binding to this array and the plugin will read it on setup stage and preset the provided values