Chcę użyć wtyczki bootstrap select w projekcie vuejs i nie mam pojęcia, jak włączyć ją do mojego projektu jako dyrektywy. Wymyśliłem następujące po obejrzeniu przykładu select2 na stronie vuejs.Jak używać wtyczki bootstrap select z dyrektywą vuejs i przeglądać w trybie inspekcji
<span id="el">
<select class="selectpicker" data-style="btn-primary" v-selectpicker="selected" :options="workflow">
<option value="0">default</option>
</select>
</span>
Oto moja dyrektywa i widok
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 skończyć uzyskiwanie błąd
Uncaught TypeError: $(...).selectpicker is not a function
i już sprawdzone, czy jest już nazywany lub nie i to jest już obecny.
Również używam laravel iskrę tak już został zdefiniowany wewnątrz jQuery plik app.js przez
require('laravel-spark/core/bootstrap');