Bootstrap Select and dynamic rows issue in vue.js

Question

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

I would avoid these jQuery plugins when possible because their behaviour is unpredictable when being used with Vue, as they both try to update the DOM. Instead, you should look at using a vue specific dropdown component such as [vue-select](http://sagalbot.github.io/vue-select/) — craig_h, Nov 20 '17 at 12:38
I moved to vue-select and it works well. Thanks for your input — R_life_R, Nov 20 '17 at 17:14

score 1 · Answer 1 · answered Nov 20 '17 at 14:15

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.

Bootstrap Select and dynamic rows issue in vue.js

1 Answers1