Vue.jsディレクティブ内で関数コールバックを渡して使用する方法

Question

select2.jsを使用するための新しいディレクティブを作成しました。selectイベントのchangeイベント内でコールバックパラメータを呼び出す必要があります。

指令コード：

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

params: ['options', 'change'], 

bind: function() { 
    var self = this; 
    var vm = this.vm; 
    var key = this.expression; 
    $(this.el) 
     .select2({ 
      data: this.params.options, 
      theme: "bootstrap", 
      language: "pt-BR", 
      containerCssClass: ':all:' 
     }) 
     .on('change', function() { 
      self.set($(self.el).val()); 
      self.params.change($(self.el).val()); 
     }); 

    vm.$set(key, $(this.el).val()); 
}, 
update: function(value, oldValue) { 
    $(this.el).val(value).trigger('change'); 
}, 
unbind: function() { 
    $(this.el).off().select2('destroy'); 
} 

}）。

と使用：私が見つけた

<select v-select="controller" change="getActions"> 
.... options ... 
</select> 

ソリューション（それは最高の場合、私は知らない）：ここでは

... 

.on('change', function() { 
    self.set($(self.el).val()); 
    if(typeof vm[self.params.change] == 'function') vm[self.params.change]($(self.el).val()); 
    }); 

... 

Answer 1

は、あなたのようにSELECT2を使用してコールバックを渡すことができるかを示すフィドルですコンポーネントとは対照的です。

https://jsfiddle.net/vbranden/up8kb0j8/

基本的に私はSELECT2を使用し、 "変更" そして、（私のバイオリンでlodashを使用してIM）変更イベントでそれを呼び出すfunctiob

props: { 
    change: { type: Function } 
} 

を支える

$(self.$el).select2(config).on('select2:select select2:unselect', function() { 
    if (_.isFunction(self.change)) self.change(v) 
}) 

を作ります最近のvueプロジェクトでは、ディレクティブとして多くの問題を抱えていました。コンポーネントとしてはるかに優れているIMHO