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
|
1 2 3 4 5 6 7 |
<select class="js-example-basic-single" name="state"> <option value="AL">Alabama</option> ... <option value="WY">Wyoming</option> </select> $('.js-example-basic-single').select2(); |
You can create the following Vue component
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<template> <select name="days"> </select> </template> <script> export default { name:"select2box", data () { return { options :[ { id: "sun", text: 'Sunday' }, { id: "mon", text: 'Monday' }, { id: "tue", text: 'Tuesday' }, { id: "wed", text: 'Wednesday' }, { id: "thu", text: 'Thursday' }, { id: "fri", text: 'Friday' }, { id: "sat", text: 'Saturday' }, ], value: "mon" } }, mounted: function () { var vm = this $(this.$el) // init select2 .select2({ data: this.options }) .val(this.value) .trigger('change') // emit event on change. .on('change', function () { //vm.$emit('input', this.value) alert(this.value) }) }, } </script> |
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
|
1 |
$(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
|
1 2 3 |
.on('change', function () { alert(this.value) }) |
Do not forget to add following libs to the your page
|
1 2 3 |
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> |