Using vue js with selectpicker

问题

I'm using Vue.js to add multiple rows, each row contain two datetimepicker inputs and a bootstrap-select.

My problem is when I fill the inputs and click to add a new row the previous ones clear out, the reason is each time I add a new row I'm using setTimeout to referesh the selectpicker and the datetimepicker.

So I want to know if there is a way to trigger the last added element them without refreshing the previous ones.

Here is my code :

HTML

<div class="cols" id="app">
  <ul style="list-style-type: none;">
    <li>
      <button style="float: right;margin-right: 20px;margin-top: 5px;" type="button" class="btn  btn-success btn-xs"  v-on:click="addRow()">
        <i class="fa fa-plus"></i> Ajouter
      </button>
    </li>
    <li v-for="(row, id) in rows">
      <div class="form-inline cp-out" style="padding-bottom: 9px;border-radius:4px;background-color:white;margin-left:-20px;display:inline-block;width:100%;margin-top:10px;">
        <div class="col-md-3">
          <label :for="['time_start'+id]"  class="control-label">start time</label>
          <div   class="input-group date form_time" style="width:100%;" data-date="" data-date-format="hh:ii"  :data-link-field="['time_start'+id]" data-link-format="hh:ii">
            <input v-model="row.startTime" :name="'rows['+id+'][startTime]'" class="form-control" :id="['startTime' + id]" size="16" type="text" value="" >
            <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
          </div>
        </div>
        <div class="col-md-3">
          <label :for="['time_end'+id]" class="control-label" style="margin-left:7px;">end time</label>
          <div class="input-group date form_time" style="width:100%;" data-date="" data-date-format="hh:ii"  :data-link-field="['time_end'+id]" data-link-format="hh:ii">
            <input v-model="row.endTime"  :name="'rows['+id+'][endTime]'" class="form-control" :id="['endTime'+id]" size="16" type="text" value="" >
            <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
          </div>
        </div>

        <div class="col-md-4">
          <div class="form-group select_group" style="margin-left:5px;">
            <label :for="['status' + id]" class="control-label">Status</label>
            <select data-width="100%" v-model="row.status" :name="'rows['+id+'][status]'" :id="['status' + id]" class="select_picker"  data-live-search="true" multiple  >
              <option value="Status 1">Status 1</option>
              <option value="Status 2">Status 2</option>
            </select>
          </div>
        </div>
        <div class="col-xs-1">
          <button type="button" class="btn btn_delete btn-xs btn-danger" v-on:click="delRow(id)">
            <i class="fa fa-remove"></i> delete
          </button>
        </div>

      </div>
    </li>
  </ul>
</div>

JS

app = new Vue({
  el: '#app',
  data: {
    rows: []
  },
  methods: {
    addRow: function () {
      this.rows.push({startTime: '', endTime: '', status: []});
      setTimeout(function () {
        $('.select_picker').selectpicker('refresh');
        $('.form_time').datetimepicker({format: 'LT'});
      }.bind(this), 10);
    },
    delRow: function (id) {
      this.rows.splice(id, 1);
    }
  },created:function() {
    this.addRow();
  }
});

This is the example : https://jsfiddle.net/rypLz1qg/9/

回答1:

You really need to write a wrapper component. Vue expects to control the DOM and not to have you making DOM-changing things like the *picker calls at arbitrary times. However, a component gives you the opportunity to tell your component how to interact with the DOM in each of its lifecycle hooks so that its behavior can be consistent. See the JavaScript tab on the wrapper component example page.

来源：https://stackoverflow.com/questions/42937845/using-vue-js-with-selectpicker