Select 2 not working after adding vue js

Question

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.

Paludal

Answer 1

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();
  }

});

Tumer

Thank you for this code snippet, which might provide some limited, immediate help. A proper explanation would greatly improve its long-term value by showing why this is a good solution to the problem, and would make it more useful to future readers with other, similar questions. Please edit your answer to add some explanation, including the assumptions you've made. – Rowena

Vue's document is very helpful and friendly for you.Please ask question after google it. – Tumer

Answer 2

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.

Selfseeking

Answer 3

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/

Paludal

Answer 4

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();
     }
});

Sanderling