我正在尝试实现引导选择插件(在此处找到https://developer.snapappointments.com/bootstrap-select/)以Vue.js为javascript框架的ruby on rails应用程序。
目标是，在一个选择中，您可以选择一个类别，在另一个选择中将所有可用于该类别的教师都选择出来。为了做到这一点，我使用axios和vue对我自己的api进行请求，并使用它来填充第二个select，它与一个简单的select字段配合使用很好，但我希望显示引导选择，我知道插件有一个函数"selectpicker('refresh'("，可以重新加载选项，但我的浏览器控制台声称，当我在vue实例上调用selectpick时，它不是一个函数，我可以在浏览器控制台上手动运行它，但它按预期工作
我的代码：
js:
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');
}
},
})
}})
视图：
<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>
最后是我的应用程序.js
//= require rails-ujs
//= require activestorage
//= require jquery
//= require jquery_ujs
//= require popper
//= require bootstrap
//= require bootstrap-select
如果有人能帮忙，我真的很感激，因为我根本不知道该怎么做
尝试更改为以下内容：
var app = new Vue({
el: '#enrollment_form',
data: {
CategoryValue: null,
TeacherValue: null,
teachers: null,
},
methods: {
fetchTeachers() {
// Get the Vue object in a variable so you can use it in the "then"
// since 'this' context changes in the "then" handler function.
let theVue = this;
this.axios
.get('/api/teachers/' + this.licenceTypeValue)
.then(response => {
theVue.teachers = response.data;
// Call bootstrap-select's 'refresh' using Vue's $nextTick function
// to ensure the update is complete before bootstrap-select is refreshed.
theVue.$nextTick(function(){ $('#teachers-list').selectpicker('refresh'); });
});
}
},
})
我在一个正在开发的应用程序中遇到了这个问题，并写了一篇文章，对其进行了更详细的解释，其中包括损坏的示例和工作示例。我的例子在没有AJAX的情况下通过JavaScript更改选项，但概念是一样的。
在上面的代码中，您使用Vue的$nextTick函数调用引导程序选择"刷新"，该函数等待Vue对象的更新完成，然后再执行传递给$nextTik调用的代码。(请参阅$nextTick on Vue的文档(
注意：您也可以在Vue的"更新"事件处理程序中进行更通用的更新，方法是添加：
updated: function(){
this.$nextTick(function(){ $('.selectpicker').selectpicker('refresh'); });
}
请注意，这将始终更新共享同一类"selectpicker"的所有引导程序选择。更新将发生在vue数据的每次更新上，包括与<选择>这是一种浪费，可能会导致性能问题。
我相信最好的做法是刷新<选择>需要更新，此时它需要刷新(在您的情况下，AJAX调用返回并且"教师"属性已更新。(
如果您在timeout方法中运行它，它将被刷新。
setTimeout(function () {
$(".selectpicker").selectpicker("refresh");
}, 1000);