如何在 Vue.js 指令中传递和使用函数回调

Question

我创建了一个新指令来使用 select2.js，我想在 select2 的更改事件中调用回调参数。

指令代码：

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/

本质上使“改变”道具成为一种功能

props: {
    change: { type: Function }
}

然后在更改事件中调用它（我在我的小提琴中使用 lodash）

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

我最近在一个 vue 项目中使用了 select2，并且将它作为指令存在很多问题。作为一个组件，它工作得更好恕我直言