将vue.js方法与select2指令一起使用

Question

我已经创建了一个新指令，使用june插件 Select2 与vue.js一起记录在vue.js example page上。

但我不想只输出所选选项的值。要存储选择，我尝试将自定义方法create绑定到@change事件。

在指令内部，Select2会在更新时触发选择输入字段的更改事件，但它仍然不会调用我的自定义方法。

有一些隐藏的魔法吗？我试过阅读vue.js的源代码，但找不到能让我朝着正确方向前进的东西。

＆＃13;

＆＃13;

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

＆＃13;

select {
  min-width: 300px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

也许你可以像这样添加watcher到你的new_item变量。因此，当new_item值发生变化时，您可以执行某些操作。 我自己仍在搜索如何在select2更改方法之后触发@change，但现在还没有任何线索。

＆＃13;

＆＃13;

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

＆＃13;

select {
  min-width: 300px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;