How to use bootstrap select plugin with vuejs directive and browser

Question

I want to use bootstrap select plugin in a vuejs project, and I'm confused about how to include it in my project as a directive. I came up with the following by looking at the select2 example on the vuejs website.

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

Here is my directive and view

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

I get an error

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

and I already checked if it is already called or not, and it is already present.

Also, I use laravel spark, so it already has jQuery defined inside the app.js file, via

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

Answer 1

Can you show us where you include jQuery and Bootstrap?

jquery should be available as $ when require("bootstrap-select"); is executed require("bootstrap-select"); . This is how I have it in my application:

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

This requires that all 3 be called in the correct order, otherwise they will not properly expand each other