Question

我正在使用Vue.js添加多行，每行包含两个datetimepicker输入和一个bootstrap-select。

我的问题是，当我填充输入并单击添加新行时，先前的行清除，原因是每次我添加新行我使用setTimeout来引用selectpicker和datetimepicker

所以我想知道是否有办法触发最后添加的元素而不刷新之前的元素。

这是我的代码：

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

这是一个例子：https://jsfiddle.net/rypLz1qg/9/

Answer 1

你真的需要写一个wrapper component。 Vue希望控制DOM，而不是让你在任意时间进行改变DOM的事情，比如* picker调用。但是，组件使您有机会告诉组件如何在其每个生命周期钩子中与DOM进行交互，以使其行为保持一致。请参阅包装器组件示例页面上的JavaScript选项卡。

将vue js与selectpicker一起使用

1 个答案: