select2 component in vue.
This project is archived and no longer maintained.
This project was generated with Vue cli version 2.9.1.
This project is built for showing how to use v-select2-component.
If you want to use it in Vue 3.0, check vue3-select2-component.
Source code in: https://github.com/godbasin/vue-select2/tree/npm-publish-code.
Vue-Select2-Component is baseed on these plugins and libs(version):
// npm install
npm install v-select2-component --save
// import Select2Component
import Select2 from 'v-select2-component';
Vue.component('Select2', Select2);
new Vue({
// ...
})
// import Select2Component
import Select2 from 'v-select2-component';
<template>
<div>
<Select2 v-model="myValue" :options="myOptions" :settings="{ settingOption: value, settingOption: value }" @change="myChangeEvent($event)" @select="mySelectEvent($event)" />
<h4>Value: {{ myValue }}</h4>
</div>
</template>
<script>
export default {
// declare Select2Component
components: {Select2},
data() {
return {
myValue: '',
myOptions: ['op1', 'op2', 'op3'] // or [{id: key, text: value}, {id: key, text: value}]
}
},
methods: {
myChangeEvent(val){
console.log(val);
},
mySelectEvent({id, text}){
console.log({id, text})
}
}
}
</script>
options
: option[]
option
: {id: key, text: value}
or string
v-model
: option value that is selected
id
or string
while multiple is disableid[]
or string[]
while multiple is enabledisabled
settings
setting
: { settingOption: value, settingOption: value }
change
v-model
select
option
({id: value, text: key, selected: ifSelected}
or string
)open
close
clear