Come utilizzare il plug-in select bootstrap con direttiva vuejs e browserify

Question

Voglio usare il plug-in select bootstrap su un progetto vuejs e sono confuso su come incorporarlo nel mio progetto come direttiva. Ho scoperto quanto segue dopo aver esaminato l'esempio select2 nel sito Web vuejs.

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

Qui è la mia direttiva e vista

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); 
     } 
    } 
}); 

io alla fine ottenere l'errore

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

e ho già controllato se è già chiamato o no ed è già presente.

Inoltre, sto usando laravel scintilla in modo che già ha definito jQuery all'interno il file app.js attraverso

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

Answer 1

Ci puoi mostrare dove siete tra cui jQuery e Bootstrap?

jQuery deve essere disponibile come $ quando viene eseguito require("bootstrap-select");. Ecco come ce l'ho nella mia app:

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

Queste necessità di tutti e 3 essere chiamato nel giusto ordine, altrimenti non si estenderà correttamente tra loro