Incorporating the bootstrap-select plugin (found at ) into a ruby on rails app with Vue.js as the javascript framework has been my latest project.
The goal is to have two select options where one selects a category and the other displays all available teachers for that selected category. I am utilizing axios and vue to make a request to my API and populate the second select field. While this works perfectly fine with a simple select field, I want to use bootstrap-select for a better user interface experience. The issue arises when trying to refresh the options using the "selectpicker('refresh')" function of the plugin. Although it works when manually executed in the browser console, calling it on my vue instance triggers a 'selectpicker is not a function' error in the console.
Here is a snippet of my code:
Javascript:
Vue.use(VueAxios, axios)
document.addEventListener('DOMContentLoaded', () => {
if(document.getElementById('enrollment_form')) {
var app = new Vue({
el: '#enrollment_form',
data: {
CategoryValue: null,
TeacherValue: null,
teachers: null,
},
methods: {
fetchTeachers() {
this.axios.get('/api/teachers/' + this.licenceTypeValue).then(response => (this.teachers = response.data))
$('.selectpicker').selectpicker('refresh');
}
},
})
}})
View:
<div class="row">
<div class="col-lg-5">
<div class="form-group">
<%= f.label :category %>*<br />
<%= f.collection_select(
:category,
Category.all,
:id,
:catgegory_name,
{include_blank: true},
{
class: 'form-control selectpicker',
"v-model" => "CategoryValue",
"v-on:change" => "fetchTeachers"
}
)%>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-5">
<div class="form-group">
<label for="teacher_id">Teacher</label>
<div>
<select id="teachers-list" class='form-control selectpicker' v-model="TeacherValue" data-fieldname = "TeacherValue">
<option label="" ></option>
<option v-for="teacher in teachers" :value="teacher.id"> {{teacher.name}} </option>
</select>
</div>
</div>
</div>
</div>
<div>
<%= f.hidden_field :teacher_id, {"v-model" => "TeacherValue"} %>
</div>
Lastly, my application.js file includes:
//= require rails-ujs
//= require activestorage
//= require jquery
//= require jquery_ujs
//= require popper
//= require bootstrap
//= require bootstrap-select
If anyone could provide assistance, I would greatly appreciate it as I am currently stuck and unable to find a solution.