Question

55

Select2 on change event is not working in Vuejs

rated 0 times [ 57] [ 2] / answers: 1 / hits: 17752 / 8 Years ago, mon, december 5, 2016, 12:00:00

I was working with select2 in vuejs , I found vuejs is not working with jquery select2 as vuejs is working with navite html.

I am using this code

Vue.directive('select', {

        twoWay: true,

        bind: function () {

            $(this.el).select2()

            .on(select2:select, function(e) {

                this.set($(this.el).val());

            }.bind(this));

            },

        update: function(nv, ov) {

            $(this.el).trigger(change);

        }

    });

    var app = new Vue({

      el: '#app',

      data: {

        supplier_id: niklesh

      }

    })

    $('#supplier_id').select2({});

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js></script>

<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css>

<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css>

<div id=app>

  {{ supplier_id }}



<select id=supplier_id class='form-control' v-model='supplier_id' v-select='supplier_id'>

    <option value=atul>Atul</option>

    <option value=niklesh>Niklesh</option>

    <option value=sachin>Sachin</option>

</select>



</div>

Please share your reply to handle this problem.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mira

Add To Favorites

Follow

Total Points: 460

Total Questions: 108

Total Answers: 99

Location: American Samoa

Member since Fri, Aug 26, 2022

2 Years ago

mira questions

1 Nodemon: app crashed waiting for file changes before starting... on Windows

Mon, Apr 4, 22, 00:00, 2 Years ago

1 Unhandled promise rejection: ReferenceError Can't find variable

Mon, Feb 14, 22, 00:00, 2 Years ago

1 momentjs datetime format on frontend with angular

Wed, Feb 9, 22, 00:00, 2 Years ago

1 How to check if element exists in DOM in Cypress?

Sun, Mar 28, 21, 00:00, 3 Years ago

1 How do I get the IP of a user in Nuxt's asyncData method?

Sat, Aug 3, 19, 00:00, 5 Years ago

View All

answered 8 Years ago gordonrockym · Accepted Answer

To get this to work with a directive, we need to understand how v-model works. From the docs:

<input v-model="something">

is just syntactic sugar for:

<input v-bind:value="something" v-on:input="something = $event.target.value">

In the case of a select element, v-model will listen for the change event (not input). So, if the directive dispatches a change event when the element changes, then v-model will work as expected.

Here is an updated version of your code (works in Vue 2):

Vue.directive('select', {

  twoWay: true,

  bind: function (el, binding, vnode) {

    $(el).select2().on(select2:select, (e) => {

      // v-model looks for

      //  - an event named change

      //  - a value with property path $event.target.value

      el.dispatchEvent(new Event('change', { target: e.target }));

    });

  },

  componentUpdated: function(el, me) {

    // update the selection if the value is changed externally

    $(el).trigger(change);

  }

});

var app = new Vue({

  el: '#app',

  data: {

    supplier_id: niklesh

  },

})

$('#supplier_id').select2({});

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js></script>

<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css>

<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css>

<div id=app>

  {{ supplier_id }}



  <select id=supplier_id class='form-control' v-model='supplier_id' v-select='supplier_id'>

    <option value=atul>Atul</option>

    <option value=niklesh>Niklesh</option>

    <option value=sachin>Sachin</option>

  </select>



</div>

And here's a version that works in Vue 3 (custom directives have different syntax, linked here):

var app = Vue.createApp({

  data: function() { 

    return {

      supplier_id: niklesh

    }

  }

})



app.directive('select', {

  beforeMount: function (el, binding, vnode) {

    $(el).select2().on(select2:select, (e) => {

      // v-model looks for

      //  - an event named change

      //  - a value with property path $event.target.value

      el.dispatchEvent(new Event('change', { target: e.target }));

    });

  },

    updated: function(el) {

    // update the selection if the value is changed externally

    $(el).trigger(change);

  }

});



app.mount('#app');



$('#supplier_id').select2({});

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js></script>

<script src=https://unpkg.com/[email protected]></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js></script>

<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css>

<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css>

<div id=app>

  {{ supplier_id }}



  <select id=supplier_id class='form-control' v-model='supplier_id' v-select='supplier_id'>

    <option value=atul>Atul</option>

    <option value=niklesh>Niklesh</option>

    <option value=sachin>Sachin</option>

  </select>



</div>