Get Selected Value Of Dropdown From Select2 In Vue Js

Hello Devs hope you are doing well. In this tutorial i am going to discuss about how we can get and set select2 values from vue js. You know we can easily get select value but it very difficult to get selected value from vue js.

In this example we will see how we can get selected value from select2 in vue js. If you don't know how to get this select2 value from select2 jquery library then this example tutorial is for you. So you will learn ultimately from this tutorial is how to use vue-select2  package and get selected value of dropdown in vue js. 

Now let's start, Use v-select2-component instead of select2 plugin

npm install v-select2-component --save

Now import this select2 component.

// import Select2Component
import Select2 from 'v-select2-component';
Vue.component ('Select2', Select2);
new Vue ({
   // ...
})

Now in HTML add the select with select2 tag

Now we are in final step, in JavaScript add this code

export default {
    //declare Select2Component
    components: {Select2},
    data() {
       return {
           myValue: '',
           myOptions: ['op1', 'op2', 'op3'] // or [{id: key, text: value}, {id: key, text: value}]
       }
   }
}

Read also :  Vue Watcher | When Would You Use a Watcher?

Hope it can help you.