Vue js Wrapper Component

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

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

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

Do not forget to add following libs to the your page