vue加载的多选下拉框

Question

最近写前端，需要一个实现可多选的下拉款，多选的功能是用bootstrap select组件实现的，但是这个组件用在固定option时可以正常加载成多选的形式，关键代码如下：

<label for="id_select"></label>
<select class="form-control selectpicker"  id="id_select" multiple>
   <option value="JDOnlineReport" selected>JD Online Report</option>
   <option value="offLine">offLine</option>
   <option value="Dashboard">Dashboard</option>
</select>

效果如图：

但是用在vue动态加载的option时，多选的效果却无法实现，部分代码：

<label v-bind:for="'s_'+select.selectId"></label>
<select v-bind:id="'s_'+select.selectId"  v-bind:name="select.selectName" class="form-control selectpicker" multiple>
    <option value="">Select Nothing</option>
    <option v-for="option in select.options">{{option.text}}</option>
</select>

产生效果如图：

因为小弟是写后台的，对于前端代码只是会用的水平。有没有同时懂得vue和bootstrap的朋友帮忙解答，一下这是什么原因造成的。或者提供一个可动态加载的支持vue的多选下拉框。万分感谢！

多选组件下载地址：http://www.jq22.com/jquery-info5428

Answer 1

相比发明轮子，拼合轮子的难度更大一点！

Answer 2

在vue的 mounted 后刷新一下看看

$(".selectpicker").selectpicker('refresh');

 

 

Answer 3

尽量不要把 这俩混一起

Answer 4

去看一下iview吧，基于vue的UI组件库，国人出品，文档全，很方便

Answer 5

这个跟js渲染的先后顺序有关吧，bootstrap要放在最后去渲染，先用vue把动态option的dom结构生成