Bootstrap-select & Vue.js: selectpicker('refresh') 不工作
Bootstrap-select & Vue.js: selectpicker('refresh') not working
我正在尝试将 bootstrap-select 插件(可在此处 https://developer.snapappointments.com/bootstrap-select/ 找到)实施到 rails 应用程序上的 ruby 中 Vue.js 作为 javascript 框架。
objective 是在一个 select 中您可以选择一个类别,而在另一个中您可以选择该类别的所有可用教师。
为此,我使用 axios 和 vue 向我自己的 api 发出请求并使用它来填充第二个 select 并且它可以很好地处理一个简单的 select 字段,但是我想要 bootstrap-select 显示,我知道插件有一个函数 "selectpicker('refresh')" 使选项重新加载成为可能,但我的浏览器控制台声称 selectpicker 不是一个函数,当我在我的 vue 实例上调用它,我可以在浏览器控制台上手动 运行 它并且它按预期工作
我的代码:
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
如果有人能提供帮助,我将不胜感激,因为我根本不知道该怎么做
尝试更改为以下内容:
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,包括损坏和工作示例。我的示例通过 JavaScript 更改选项而不使用 AJAX,但概念是相同的。
在上面的代码中,您使用 Vue 的 $nextTick 函数调用 bootstrap-select 'refresh',该函数会等待 Vue 对象的更新完成,然后再执行传递给的代码$nextTick 调用。
(参见 $nextTick on Vue's documentation)
注意:您还可以在 Vue 的 'update' 事件处理程序中进行更通用的更新,方法是添加:
updated: function(){
this.$nextTick(function(){ $('.selectpicker').selectpicker('refresh'); });
}
请注意,这将始终更新共享相同 class 'selectpicker' 的所有 bootstrap-select。更新将在 vue 数据的每次更新时发生,包括那些与相关
我认为最好的做法是只刷新需要更新的
如果你运行它在超时方法中,它会被刷新。
setTimeout(function () {
$(".selectpicker").selectpicker("refresh");
}, 1000);
我正在尝试将 bootstrap-select 插件(可在此处 https://developer.snapappointments.com/bootstrap-select/ 找到)实施到 rails 应用程序上的 ruby 中 Vue.js 作为 javascript 框架。
objective 是在一个 select 中您可以选择一个类别,而在另一个中您可以选择该类别的所有可用教师。 为此,我使用 axios 和 vue 向我自己的 api 发出请求并使用它来填充第二个 select 并且它可以很好地处理一个简单的 select 字段,但是我想要 bootstrap-select 显示,我知道插件有一个函数 "selectpicker('refresh')" 使选项重新加载成为可能,但我的浏览器控制台声称 selectpicker 不是一个函数,当我在我的 vue 实例上调用它,我可以在浏览器控制台上手动 运行 它并且它按预期工作
我的代码:
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
如果有人能提供帮助,我将不胜感激,因为我根本不知道该怎么做
尝试更改为以下内容:
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,包括损坏和工作示例。我的示例通过 JavaScript 更改选项而不使用 AJAX,但概念是相同的。
在上面的代码中,您使用 Vue 的 $nextTick 函数调用 bootstrap-select 'refresh',该函数会等待 Vue 对象的更新完成,然后再执行传递给的代码$nextTick 调用。 (参见 $nextTick on Vue's documentation)
注意:您还可以在 Vue 的 'update' 事件处理程序中进行更通用的更新,方法是添加:
updated: function(){
this.$nextTick(function(){ $('.selectpicker').selectpicker('refresh'); });
}
请注意,这将始终更新共享相同 class 'selectpicker' 的所有 bootstrap-select。更新将在 vue 数据的每次更新时发生,包括那些与相关
我认为最好的做法是只刷新需要更新的
如果你运行它在超时方法中,它会被刷新。
setTimeout(function () {
$(".selectpicker").selectpicker("refresh");
}, 1000);