CODEWITHSUNDEEP
vue.jsbootstrap-select
R_life_R
R_life_R

Reputation: 816

Bootstrap Select and dynamic rows issue in vue.js

I have the following dynamic table/rows in vue.js and I use bootstrap-select to have a nicer dropdown select. The form has a add/remove line to be dynamic. I cannot load the options of a select using bootstrap select. The select appears on each row but no dropdown list appears. What am I doing wrong?

here goes my jsfiddle

HTML:

<div id="app">
  <table class="table">
    <thead>
      <tr>
        <td><strong>Date</strong></td>

        <td><strong>Account</strong></td>
        <td><strong>Debit</strong></td>
        <td><strong>Credit</strong></td>
        <td></td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows">
        <td>

           <input type="date" v-date="row.myDate">
        </td>

  <td>
       <select class="selectpicker" ref="select" v-model="row.select">
        <option value="Acc1">Account1</option>
        <option value="Acc2">Account2</option>
        <option value="Acc3">Account3</option>
        <option value="Acc4" selected>Account4</option>
        </select>
        </td>
        <td>
          <input type="text" v-model="row.debit" v-on:keypress="isNumber(event)">
        </td>
        <td>
          <input type="text" v-model="row.credit" v-on:keypress="isNumber(event)">
        </td>
        <td><a @click="removeRow(row)">Remove</a></td>
      </tr>
    </tbody>
    <tfooter>

  <td class="al-g"> <button class="button btn-primary" @click="addRow">Add Line</button></td>
  <td></td>
  <td class="al-r">tot D.: {{ totaldebit | roundme }}</td>
  <td class="al-r">tot Cr.:{{ totalcredit | roundme}}</td>
  <td class="al-r">Dif: {{ totaldebit-totalcredit | roundme}}</td>
    </tfooter>
  </table>
</div>

JS:

Vue.filter('roundme', function (value) {
  return value.toFixed(3);
})


var app = new Vue({
  el: "#app",
  data: {
    rows: [{debit:0, credit:0},

    ]
  },
    computed: {
    totaldebit() {
        return this.rows.reduce((total, row) => {
          return total + Number(row.debit);
        }, 0);
      },

      totalcredit() {
        return this.rows.reduce((total, row) => {
          return total + Number(row.credit);
        }, 0);
      }
  },
  methods: {
    addRow: function() {
      this.rows.push({myDate:"",
      account:"",
        debit: "",
        credit: ""
      });
    },
    removeRow: function(row) {
      //console.log(row);
      this.rows.$remove(row);
    },
    isNumber: function(evt) {
      evt = (evt) ? evt : window.event;
      var charCode = (evt.which) ? evt.which : evt.keyCode;
      if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
        evt.preventDefault();;
      } else {
        return true;
      }
    }
  }
});

Upvotes: 1

Views: 1605

Answers (1)

Roy J
Roy J

Reputation: 43899

You are going to need a wrapper component like this.

The way bootstrap-select normally activates is to scan the HTML at startup and apply itself to .selectpicker elements. That won't work if the DOM is dynamic, as it is with Vue. You have to activate the elements using the $(element).selectpicker() method as they are created or updated.

See also Make VueJS and jQuery play nice.

Upvotes: 1

Related Questions