Wie Bootstrap verwenden wählen Sie Plugin mit Vuejs Richtlinie und browserifizieren

Question

Ich möchte Bootstrap wählen Plugin in einem Vuejs-Projekt und ich bin verwirrt, wie es in mein Projekt als eine Richtlinie zu integrieren. Nachdem ich mir das select2-Beispiel in der vuejs-Website angeschaut habe, habe ich folgendes herausgefunden.

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

Hier ist meine Richtlinie und Ansicht

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

ich den Fehler am Ende immer

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

und ich habe bereits überprüft, ob bereits oder nicht genannt wird, und es ist bereits vorhanden.

Auch ich bin mit Laravel Funken, so dass es bereits definiert jQuery innerhalb der app.js durch

Datei

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

Answer 1

Können Sie uns zeigen, wo Sie sind, wie jQuery und Bootstrap?

jquery muss als $ verfügbar sein, wenn require("bootstrap-select"); ausgeführt wird. Hier ist, wie ich es in meiner App:

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

Diese müssen alle drei in der richtigen Reihenfolge aufgerufen werden, sonst werden sie nicht richtig einander

verlängern