Bootstrap selectpicker VueJS директива

Question

Я пытаюсь создать собственную директиву Bootstrap, что делает <select> вход в «selectpicker» из Bootstrap selectpicker Кроме того, я хотел бы эту директиву, чтобы использовать функциональные возможности VueJS по умолчанию options для заполнения параметров на <select> Так что HTML будет выглядеть примерно так:

<select v-selectpicker="myValue" options="myOptions"></select>

Теперь я могу создать директиву идеально и использовать метод bind для вызова selectpicker() метода на элементе. Проблема заключается в том, что параметры задаются после вызова selectpicker(). Так что мне нужно либо дождаться, пока параметры не будут установлены, либо я должен выполнить другой вызов selectpicker(refresh), когда будут установлены параметры.

Кто-нибудь знает, возможно ли это?

Answer 1

Я сделал это, и это сработало для меня.

Vue.directive('selectpicker', { 
    twoWay: true, 
    bind: function() { 
     $(this.el).on("change", function(e) { 
      this.set($(this.el).val()); 
     }.bind(this)); 
    }, 
    update: function(nv, ov) { 
     $(this.el).trigger("change"); 
    } 
});