本文介绍了当我尝试使用vue js显示JSON数据时Selectpicker不工作?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当我写$('。selectpicker')。selectpicker('refresh');在控制台中,它正在加载..我应该在哪里提供这段代码?
When I write $('.selectpicker').selectpicker('refresh'); in the console it is loading.. Where should I provide this code?
我的HTML代码是
<form action="" class="form-inline" onsubmit="return false;" method="post" id="categories">
<div class="row">
<div class="col-xs-6">
<select id="lunchBegins" class="selectpicker" data-live-search="true" data-live-search-style="begins" title="Select Your City" v-model="category" name="category">
<option v-for="post in articles" v-bind:value="post.name">{{post.name}}</option>
</select>
</div>
<div class="col-xs-6">
<select id="basic" class="selectpicker show-tick form-control" v-model="subcategory" name="subcategory">
<option v-for="so in services" v-bind:value="so.name">{{so.name}}</option>
</select>
</div>
</div>
</form>
我的vue js脚本如下所示..我在mount()中添加了脚本,但是我没有任何反应。但是,当我输入控制台时,出现下拉列表
My vue js script is as given below.. I have added the script in the mount() but nothing happens for me. But when I type in the console.. drop down list appears
<script>
categories = new Vue({
el: '#categories',
data: {
articles: [],
services: [],
category: 0,
subcategory: 0,
content: false
},
watch: {
subcategory: function(e) {
this.prefetch();
},
category: function() {
var self = this;
self.subcategory = 0;
$.ajax({
url: "https://n2s.herokuapp.com/api/post/get_all_services/",
data: {
'service': self.id
},
type: "POST",
dataType: "JSON",
success: function(e) {
console.log('Loading services');
console.log(self.category);
let categoryIdArray = self.articles.filter(x=>x.name==self.category);
console.log(categoryIdArray);
self.services = e.filter(x=>x.cat_id==categoryIdArray[0].cat_id);
console.log(self.services);
self.prefetch();
}
});
},
},
mounted: function() {
$('.selectpicker').selectpicker('refresh');
var vm = this;
$.ajax({
url: "https://n2s.herokuapp.com/api/post/get_all_category/",
method: "GET",
dataType: "JSON",
success: function(e) {
console.log(e);
vm.articles = e;
console.log(vm);
},
});
},
})
</script>
有什么办法可以初始化select picker吗?请帮助我。
Is there any way to initialize select picker? Please help me.
推荐答案
试试这段代码:
Try this code:
$(window).load(function () {
$('.selectpicker').selectpicker('refresh')
});
这篇关于当我尝试使用vue js显示JSON数据时Selectpicker不工作?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!