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

Posted 2023-02-22

【中文标题】使用带有 select2 指令的 vue.js 方法

【英文标题】：Use vue.js methods with select2 directive

【发布时间】：2016-09-27 02:01:28

【问题描述】：

我已经创建了一个新指令，以便将 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>

【参考方案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>