将 vue js 与 selectpicker 一起使用答案

【问题标题】：Using vue js with selectpicker将 vue js 与 selectpicker 一起使用
【发布时间】：2017-08-13 18:03:37
【问题描述】：

我正在使用 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>

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/

【问题讨论】：

标签： vue.js bootstrap-datetimepicker bootstrap-select

【解决方案1】：

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

【讨论】：