bootstrap selectプラグインをvuejsディレクティブとブラウザで使用する方法

Question

vuejsプロジェクトでbootstrap selectプラグインを使用したいのですが、それを私のプロジェクトにディレクティブとして組み込む方法が混乱しています。私はvuejsウェブサイトのselect2の例を見て、次のことを考え出しました。

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

は、ここで私はエラー

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

を取得し終わると、私はすでにすでに呼び出された場合にチェックしたりせず、それが既に存在している私のディレクティブとビュー

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

です。

また、私はそれが既にjQueryの

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

Answer 1

を通じてapp.jsファイル内に定義されているので、laravel火花を使用して、あなたはjQueryとブートストラップなど、どこあなたは私たちを見ることができますでしょうか？

require("bootstrap-select");を実行すると、jqueryは$として利用可能である必要があります。ここで私は私のアプリでそれを持っている方法は次のとおりです。

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

すべての3にこれらのニーズが適切な順序で呼び出されるか、あるいはそれらが適切にお互い

を拡張しません。