Vue js Wrapper Component

June 12, 2018

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