CODEWITHSUNDEEP
vuejs2jquery-select2
user80946
user80946

Reputation: 385

Select 2 not working after adding vue js

I don't know why but select2 is not working by just adding vue js. Tried lot of things like searching but no solution. When i remove vue it works and when i add it don't why is that happening in first thing.

Here is working example of it.

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>               
 <script src='https://unpkg.com/[email protected]/dist/vue.js'></script>

<div id='app'>
<select id="asd" name="asd" class="asd"><option value="1">001 - Środki trwałe x</option><option value="2">001-001 - Środek trwały 1 </option><option value="3">001-002 - Środek trwały 2 </option><option value="4">002 - Kasa</option><option value="7">04-33 - test</option><option value="10">05 - dff</option></select>
</div>

And javascript code is 

$(document).ready(function() {
    $(".asd").select2();
    new Vue({el: '#app'});
});

Or i have also created js fiddle to live demonstrate it we can see it here.

http://jsfiddle.net/8349tck1/39/

I don't know why this is happening but it is a bit weird to me .

Thank You. I hope i can get solution to this weird problem. Really weird.

Upvotes: 7

Views: 6998

Answers (4)

Riki137
Riki137

Reputation: 2521

This is the only way i found it to work.

const vm = new Vue({
   el: '#app',
   data: {
       selects: {},
   }
   mounted() {
       // don't forget to adjust the selector
       $('#app select').select2().on('change', function() {
           // you need to listen to change event to get the new value to Vue data
           // you don't need to use `selects` attribute. You can change any property in this call.
           vm.selects[$(this).attr('id')] = $(this).val();
       });
   }
});

You can also add watch property if you also want to update select2 choices the other way.

Upvotes: 1

Emtiaz Zahid
Emtiaz Zahid

Reputation: 2835

answer of zyp is correct answer

but i had to change it little bit, because my select 2 loading too fast then vue mounted. 

 new Vue({
     el: '#app',
     mounted:function(){
        setTimeout( function(){
            $(".select2").select2();
        },1000);
      $(".asd").select2();
     }
});

Upvotes: 0

zyp
zyp

Reputation: 55

Vue has own life circle，mouted partly means dom has already loaded.

new Vue({
   el: '#app',
   mounted:function(){
   //use your select2 plugin in vue's mounted period
   $(".asd").select2();
  }

});

Upvotes: 3

user80946
user80946

Reputation: 385

Actually after searching a lot i found that vue js is too hungry for dom and it doesn't recognize the action taken by jQuery so it will change to default after each lifecycle. Hence select2 doesn't work. To make it work we can just use code like this

$(document).ready(function() {
    $(".asd").select2();
    new Vue({el: '#app'});
});

For detail info https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

Upvotes: 0

Related Questions