JavaScriptVue js

Use v-select in Vue js

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>

Shaiv Roy

Hy Myself shaiv roy, I am a passionate blogger and love to share ideas among people, I am having good experience with laravel, vue js, react, flutter and doing website and app development work from last 7 years.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button