Question

我在vue.js中有以下动态表/行，我使用bootstrap-select来选择更好的下拉列表。表单有一个动态添加/删除行。我无法使用bootstrap select加载选项的选项。选择出现在每一行上，但不显示下拉列表。我做错了什么？

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

Answer 1

您将需要一个包装器组件like this。

bootstrap-select正常激活的方式是在启动时扫描HTML并将其自身应用于.selectpicker元素。如果DOM是动态的，那就不会像Vue一样工作。您必须在创建或更新时使用$(element).selectpicker()方法激活元素。

另见Make VueJS and jQuery play nice。

vue.js中的Bootstrap Select和动态行问题

1 个答案: