Question

我创建了一个使用select2.js的新指令，我想在select2的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/

基本上做出改变＆＃34;支持一个功能

props: {
    change: { type: Function }
}

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

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

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

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

1 个答案: