When you integrate your Vue.js with third party component you have to use technique called Wrapper Component. In this article we will see how we can use jQuery plugin inside the Vue
I will integrate Select2 https://select2.org/ with Vue
If you use jQuery you can use the following code in your javascript code so that select2 box will be applied to the normal select box
$('.js-example-basic-single').select2();
You can create the following Vue component
In template section you can see the select tag and it does not have the option values. We are going to pass option values when we initialize the select2 component
You can see option values inside the data()
I have mounted() function where I initialize the select2 and pass the option values
$(this.$el).select2({ data: this.options })
we are using the this.$el property, which is the root DOM element in the component
Following code show how you can handle the change event of the select2 component
.on('change', function () {
alert(this.value)
})
Do not forget to add following libs to the your page