A simple Multiselect Checkboxed using Vuejs 3
Vue 3 Multiselect Checkboxed
A simple Vuejs 3 plugin. Adds an old style multiselect form element with checkboxes. Exactly the way in was back in jQuery times
Demo
1243906.playcode.io <– click “Skip Intro” to see the demo page.
Installation
npm i vue3-multiselect-checkboxed
Usage:
Setup part:
<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>
Template part:
<template>
<div>
<Vue3MultiselectCheckboxed
:options="countryListAllIsoData"
bindLabel="name"
bindValue="code"
:preSelected="result"
:hasSearch="true"
@onVSelect="setResult"
/>
</div>
</template>
Thanks:
-
Publish a Vue Component to NPM // Vite and Vue 3 Youtube video <- you may subscribe to learn from these guys
-
Dropdown with Multiple checkbox select with Vue.js <– this is basically where I’ve got the initial idea. Thanks Julio
Development:
If you want to use this code for your own needs just do
git clone https://github.com/vldmitrofanov/vue3-multiselect-checkboxed.git
cd vue3-multiselect-checkboxed
npm install
npm run dev