CODEWITHSUNDEEP
twitter-bootstrapvue.jsbootstrap-4
Basharmal
Basharmal

Reputation: 1384

Bootstrap-select not working with dynamically populated options in Vuejs

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 enter image description here

Upvotes: 1

Views: 1783

Answers (1)

Hazza
Hazza

Reputation: 6591

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

Upvotes: 2

Related Questions