使用带有 select2 指令的 vue.js 方法

Question

我已经创建了一个新指令，以便将 jQuery 插件 Select2 与 vue.js 一起使用，如 vue.js example page 上所写。

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

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

有什么隐藏的魔法吗？我试图阅读 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>

Answer 1

也许你可以像这样将观察者添加到你的 new_item 变量中。所以当 new_item 值改变时你可以做一些事情。 我自己还在寻找如何在 select2 更改方法之后触发@change，但直到现在还没有线索。

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>