[Vuejs]-Use vue.js methods with select2 directive

by

0👍

Maybe you can add watcher to your new_item variable like this. So you can do something when new_item value change.
I myself still searching how to trigger @change after select2 change method, but no clue til now.

Vue.directive('select', {
  twoWay: true,
  priority: 1000,

  params: ['options'],

  bind: function() {
    var self = this;

    $(this.el)
      .select2({
        data: this.params.options
      })
      .on('change', function() {
        self.set(this.value);
      });
  },

  update: function(value) {
    $(this.el).val(value).trigger('change');
  },

  unbind: function() {
    $(this.el).off().select2('destroy');
  }
});

var vm = new Vue({
  el: '#items',
  data: {
    items: [],
    new_item: '',
    options: [{
      id: 1,
      text: 'First'
    }, {
      id: 2,
      text: 'Second'
    }, {
      id: 3,
      text: 'Third'
    }, {
      id: 4,
      text: 'Fourth'
    }, {
      id: 5,
      text: 'Fifth'
    }]
  },
  methods: {
    create: function() {
      var self = this,
        label = '';

      this.options.map(function(item) {
        if (self.new_item == item.id)
          label = item.text;
      });

      var obj = {
        id: self.new_item,
        name: label
      };

      this.items.push(obj);
      this.new_item = '';
    }
  },
  watch:{
    new_item:function(){
       alert(this.new_item);
    }
  }
});
select {
  min-width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue/1.0.24/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<div id="items">
  <ul>
    <li v-for="item in items">{{ item.id }} &ndash; {{ item.name }}</li>
  </ul>
  <select v-select="new_item" @change="create" :options="options">
    <option value="0">--Select--</option>
  </select>
</div>

Leave a comment