Как использовать bootstrap select plugin с директивой vuejs и браузером

Question

Я хочу использовать плагин выбора bootstrap в проекте vuejs, и я смущен тем, как включить его в мой проект в качестве директивы. Я придумал следующее, посмотрев пример select2 на веб-сайте vuejs.

<span id="el"> 
    <select class="selectpicker" data-style="btn-primary" v-selectpicker="selected" :options="workflow"> 
    <option value="0">default</option> 
    </select>              
</span> 

Вот моя директива и вид

require("bootstrap-select"); 

Vue.directive('selectpicker',{ 

    twoWay: true, 

    deep: true, 

    bind: function() {   
     $(this.el).selectpicker().on("change", function(e) { 
      this.set($(this.el).val()); 
     }.bind(this)); 
    }, 
    update: function (value) { 
     $(this.el).selectpicker('refresh').trigger("change"); 
    }, 
    unbind: function() { 
     $(this.el).off().selectpicker('destroy'); 
    } 
}); 


new Vue({ 

    el: '#el', 

    data: { 

     tasksLoaded: false, 
     tasks: [], 
     workflow: [ 
      { 
       id:'todo', 
       value: 'To Do' 
      }, 
      { 
       id: 'backlog', 
       value: 'Backlog' 
      }, 
      { 
       id: 'doing', 
       value: 'Doing' 
      }, 
      { 
       id: 'restest', 
       value:'Retest' 
      }, 
      { 
       id: 'completed', 
       value: 'Completed' 
      }, 
      { 
       id: 'deployed', 
       value: 'Deployed' 
      } 
     ], 
     sections:[], 
     tests:[], 
     sectionId: '', 
     testId: '' 
    }, 

    watch: {    
     // watch these particular models for changes and then fire on trigger  
     sectionId: function(value) {       
      this.getTests(value);     
     }, 
     testId: function(value) { 
      this.getResults(value); 
     } 
    } 
}); 

я в конечном итоге получаю ошибку

Uncaught TypeError: $(...).selectpicker is not a function 

и я уже проверил, если уже называют или нет, и она уже присутствует.

Кроме того, я использую Laravel искру, так что уже JQuery определена внутри в app.js файл через

require('laravel-spark/core/bootstrap'); 

Answer 1

Можете ли вы показать нам, где вы в том числе JQuery и Bootstrap?

jQuery должен быть доступен как $ при запуске require("bootstrap-select");. Вот как я его в мое приложение:

window.$ = window.jQuery = require('jquery'); 
require('bootstrap'); 
require('bootstrap-select'); 

Это нужно все 3 называться в правильном порядке, иначе они не будут должным образом расширить друг друга