Bootstrap-select not working with dynamically populated options in Vuejs

Question

I am trying to use bootstrap-select in one of my projects at first already created select option it works fine but when the options of the select are built dynamically the plugin does not work and it does not show any error too. I have included these $("#supplier_id").selectpicker("render");$("#supplier_id").selectpicker("refresh"); as proposed in different answers like Bootstrap-select not working with dynamically populated options and jquery bootstrap selectpicker refreshing lists based upon previous list choice and so on but still, I am not able to achieve what I want.

The HTML code in Vue file is like below

 

 <form novalidate @submit.prevent="getData">
     <div class="form-horizontal" v-for="(row, index) in $v.rows.$each.$iter" :key="index">
            <div class="form-group">
              <div class="col-md-3">
                <select
                  name="supplier_id1"
                  id="supplier_id"
                  class="form-control test"
                  v-model="row.supplier_id1.$model"
                  data-live-search="true"
                >
                  <option value selected>د پلورونکي ټاکنه</option>
                  <option
                    v-for="Supplier in Suppliers"
                    :key="Supplier.id"
                    :value="Supplier.id"
                  >{{ Supplier.name }}</option>
                </select>                    
            </div>
          </div>
          <button :disabled="form.busy" type="submit" class="btn btn-primary">خوندی کړی</button>
          <button
            :disabled="form.busy"
            class="btn btn-success"
            @click="[rows.push({   supplier_id1: '',date1:'',totalAmount1:'',description1:''
              }),refreshPicker()]"
          >اضافه کړی</button>
        </form>

The Script code in Vue file is like below

    export default {

  data() {
    return {
      rows: [
        {
          supplier_id1: "",
          totalAmount1: "",
          date1: "",
          description1: ""
        }
      ],
    }
    }
    ,methods: {
        refreshPicker: function() {
          $(".test").selectpicker();
          $(".test").selectpicker("render");
          $(".test").selectpicker("refresh");
          //   alert("this is also called");
        },
    getData: function() {//getDatecode }

    },
  created() {$(".test").selectpicker();}
}

Snapshot is here

You're using the same id for multiple elements. id must be unique on the page. You should try using class as your selector instead of id. — Hiws
– Hiws, Commented Apr 27, 2020 at 10:27
You probably need to either create your own component as Hazza suggested, since this will init the selectpicker when the component is mounted automatically. Or try wrapping your refreshPicker() call in a $nextTick or setTimout to allow the dom to refresh. — Hiws
– Hiws, Commented Apr 27, 2020 at 12:55
Hazza's option would be best practice and the 2nd option is a bit more hacky. I would also suggest to try avoid using jQuery with Vue because they don't work that well together. — Hiws
– Hiws, Commented Apr 27, 2020 at 12:57

Hazza · Accepted Answer · 2020-04-27 15:32:00Z

2

It is hard to say from your example what the exact issue is. I would suggest a few things:

You don't need to instantiate bootstrap-select every time you refresh it.
Use vue's this.$nextTick function to run code that relies on the dom being updated to reflect your new data

Here is a simplified demo of bootstrap select updating with new values from vue https://codepen.io/Hazzamanic/pen/KKdmJzg

I'd recommend wrapping bootstrap-select in a component so you can cleanup the dom after. Something like:

Vue.component('bootstrap-select', {
  template: '...',
  mounted: function() {
    $(this.$el).selectpicker();
  },
  beforeDestroy: function() {
    $(this.$el).selectpicker('destroy');
  }
});

EDIT: From your comment it seems you need to initialize a new bootstrap-select. I'd recommend creating a component for it. This article should help you get started: https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

Alternatively, I have adjusted my codepen to hack in a solution. It gives each select a unique id using v-bind:id attribute and initializes a bootstrap select whenever you add a new row.

There is also a component someone else has made to copy the bootstrap-select functionality on github: https://github.com/Sandalf/vue-bootstrap-select

edited Apr 27, 2020 at 15:32

answered Apr 27, 2020 at 9:39

Hazza

6,6033 gold badges28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Basharmal Over a year ago

Mr.Hazza, Thanks for the prompt response what I want is to add dynamically two, three or more dropdowns I don't want to add items to the dropdown dynamically so when I add new dropdown the bootstrap-select is not applied on the second dropdown

Hazza Over a year ago

I see. Well then I'd recommend (as did @Hiws) creating a component like in my example above, this way whenever you render a new instance of that component it can initialize the bootstrap-select. However, for a dirty solution, I've updated my codepen: codepen.io/Hazzamanic/pen/KKdmJzg

Basharmal Over a year ago

Perfect it worked, please update your answer so I can upvote for you and thanks

Collectives™ on Stack Overflow

Bootstrap-select not working with dynamically populated options in Vuejs

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related