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 — craig_h
– craig_h, Commented Nov 20, 2017 at 12:38
I moved to vue-select and it works well. Thanks for your input — R_life_R
– R_life_R, Commented Nov 20, 2017 at 17:14

Roy J · Accepted Answer · 2017-11-20 14:15:53Z

1

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.

answered Nov 20, 2017 at 14:15

Roy J

44k10 gold badges84 silver badges106 bronze badges

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

Collectives™ on Stack Overflow

Bootstrap Select and dynamic rows issue in vue.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related