Loading bootstrap-multiselect dynamically in vueJs loop

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');
  }
})