我正在尝试使用Vue.js作为javascript框架将bootstrap-select插件(在https://developer.snapappointments.com/bootstrap-select/处实现)实现为ruby on rails应用程序。
目标是,在一个选择中,您可以选择一个类别,而在另一个选择中,您可以选择该类别的所有可用教师。 为此,我使用axios和vue对我自己的api进行请求,并使用该请求填充第二个选择,并且它与一个简单的选择字段配合正常,但是我希望显示bootstrap-select,我知道该插件具有一个函数“ selectpicker('refresh')”以使选项可以重新加载,但是我的浏览器控制台声称在我的vue实例上调用selectpicker不是一个函数,但是我可以在浏览器控制台上手动运行它,但是它可以按预期工作
我的代码:
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>
最后是我的application.js
//= require rails-ujs
//= require activestorage
//= require jquery
//= require jquery_ujs
//= require popper
//= require bootstrap
//= require bootstrap-select
如果有人可以提供帮助,我真的很感激,因为我根本不知道该怎么做
答案 0 :(得分:0)
尝试更改为以下内容:
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'); });
});
}
},
})
我在正在开发的应用程序中遇到了这个问题,并写了一篇更多detailed explanation的文章,其中包括无效的示例。我的示例通过不带AJAX的JavaScript更改了选项,但是概念是相同的。
在上面的代码中,您正在使用Vue的$ nextTick函数调用引导选择“刷新”,该函数将等待Vue对象的更新完成,然后执行传递给$ nextTick调用的代码。 (请参阅$nextTick on Vue's documentation)
注意:您还可以通过添加以下内容在Vue的“更新”事件处理程序中进行更通用的更新:
updated: function(){
this.$nextTick(function(){ $('.selectpicker').selectpicker('refresh'); });
}
请注意,这将始终更新共享同一类“ selectpicker”的所有引导选择。该更新将在vue数据的每次更新中进行,包括与所讨论的
我相信最佳实践是仅刷新需要更新的
答案 1 :(得分:0)
如果以超时方法运行它,它将刷新。
setTimeout(function () {
$(".selectpicker").selectpicker("refresh");
}, 1000);