在vueJs循环中动态加载bootstrap-multiselect

Question

I'm trying to load dynamically bootstrap-multiselect in VueJs loop.

I want to do something like this:

<div class="col-xs-6 col-sm-4 mb-1" v-for="params in param">

   <select class="mult" multiple="multiple">
       <option value="cheese">Cheese</option>
       <option value="tomatoes">Tomatoes</option>
   </select>

 </div>

but it does not load correctly Check this out jsfiddle

Please, i need advice.

Answer 1

Try this:

http://jsfiddle.net/Lw5us5y3/5/

I'm calling the refresh method of multiselect after the updated vue lifecycle.

 $(function() { $('.mult').multiselect(); }); new Vue({ el: '#app', data: { params: '', message: 'Test' }, methods: { load: function() { this.params = [{value: 'cheese'}, {value: 'tomatoes'}] } }, updated: function(){ $('.mult').multiselect('refresh'); } })