In this article, we will learn about how we can use v-select in Vue js. I will show you step by step guide to implement v-select with options in Vue js.
Basic Example of v-select
In the below example you will learn how to implement v-select with options.
<template>
<div>
<v-select v-model="selected" label="title" :options="multipleOption"/>
</div>
</template>
<script>
import 'vue-select/dist/vue-select.css';
import vSelect from 'vue-select';
export default {
components: {
vSelect,
},
data() {
return {
multipleOption: [{
value: null,
title: 'Please Choose Product Type'
},
{
value: 'simple',
title: 'Simple Product'
},
{
value: 'configurable',
title: 'Configurable'
},
{
value: 'bundle',
title: 'Bundle'
},
],
selected:'',
}
}
}
</script>Basic Example v-select multiple:
In the below example you will learn how to implement v-select with multiple options.
<template>
<div>
<v-select multiple v-model="selected" label="title" :options="multipleOption"/>
</div>
</template>
<script>
import 'vue-select/dist/vue-select.css';
import vSelect from 'vue-select';
export default {
components: {
vSelect,
},
data() {
return {
multipleOption: [{
value: null,
title: 'Please Choose Product Type'
},
{
value: 'simple',
title: 'Simple Product'
},
{
value: 'configurable',
title: 'Configurable'
},
{
value: 'bundle',
title: 'Bundle'
},
],
selected:'',
}
}
}
</script>Above is the very basic example, where I have shown how you can use v-select multiple inside the vue js.
Now next we will learn about the v-select event, for example for to pick selected event and deselected event.
V-select get selected option data
To get the selected option you have to use selected event with the @option
<template>
<div>
<v-select multiple v-model="selected" label="title" :options="multipleOption" @option:selected="onChange($event)"/>
</div>
</template>
<script>
import 'vue-select/dist/vue-select.css';
import vSelect from 'vue-select';
export default {
components: {
vSelect,
},
data() {
return {
multipleOption: [{
value: null,
title: 'Please Choose Product Type'
},
{
value: 'simple',
title: 'Simple Product'
},
{
value: 'configurable',
title: 'Configurable'
},
{
value: 'bundle',
title: 'Bundle'
},
],
selected:'',
}
},
methods: {
onChange(events) {
console.log(events)
},
}
}
</script>V-select get deselected option data
To get the selected option you have to use deselected event with the @option
<template>
<div>
<v-select multiple v-model="selected" label="title" :options="multipleOption" @option:deselected="onChange($event)"/>
</div>
</template>
<script>
import 'vue-select/dist/vue-select.css';
import vSelect from 'vue-select';
export default {
components: {
vSelect,
},
data() {
return {
multipleOption: [{
value: null,
title: 'Please Choose Product Type'
},
{
value: 'simple',
title: 'Simple Product'
},
{
value: 'configurable',
title: 'Configurable'
},
{
value: 'bundle',
title: 'Bundle'
},
],
selected:'',
}
},
methods: {
onChange(events) {
console.log(events)
},
}
}
</script>
