Используйте vue.методы js с директивой select2

Я создал новую директиву для использования jQuery Plug-In Select2 с vue.js как записано на vue.JS пример страницы .

Но я не хочу просто выводить значение выбранного параметра. Чтобы сохранить выбранные параметры, я пытаюсь привязать свой пользовательский метод createк @changeсобытию.

Внутри директивы Select2 инициирует событие изменения для поля ввода select во время обновления, но, тем не менее, не вызывает мой пользовательский метод.

Есть ли какая-то скрытая магия? Я пытался прочитать исходный код vue.js, но не могу найти что-то, что указывает мне в правильном направлении.

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 = '';
    }
  }
});
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>

1 ответ

  1. Возможно, вы можете добавить watcher в переменную new_item, как это. Таким образом, вы можете что-то сделать при изменении значения new_item.
    Я сам все еще ищу, как вызвать @change после select2 change method, но до сих пор не знаю.

    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>