第三方控件初始化 - Vue.set 和 .$nextTick 的问题
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
Bootstrap 4 + selectpicker (可以搜索的 select 控件)
select项通过 ajax 载入后通过 Vue.set 来填入数据,然后通过 .$nextTick 调用控件的初始化。
但是偶尔会出现初始化好的控件没有选项( 初始化时原来的select 选项没有渲染完成 )
有什么方法避免这种情况?
以下相关代码
<select class="form-control selectpicker" data-style="btn-default" data-live-search="true" name="group_id" v-model="options.selectGroup">
<option v-for="(item,idx) in options.groups" :value="item.group_id" v-html="item.name"></option>
</select>
var that = this;
$.get(that.script , {type:'groups'},function(result){
if(result.MsgId){
}else{
Vue.set(that.options , 'groups' , result.groups);
that.$nextTick(function(){
$('.selectpicker').selectpicker();
if( location.get('group')){
$('.selectpicker').selectpicker('val',location.get('group'));
}
})
}
})