Verwenden von Vue Js mit Selectpicker

Question

Ich verwende Vue.js, um mehrere Zeilen hinzuzufügen, enthält jede Zeile zwei datetimepicker Eingänge und eine Bootstrap-Auswahl.

Mein Problem ist, wenn ich die Eingaben fülle und klicke, um eine neue Zeile hinzuzufügen, löschen die vorherigen, der Grund ist jedes Mal, wenn ich eine neue Zeile hinzufüge ich benutze setTimeout, um den selectpicker und den datetimepicker zu verwerfen.

Also ich möchte wissen, ob es eine Möglichkeit gibt, das letzte hinzugefügte Element auszulösen, ohne die vorherigen zu aktualisieren.

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

Dies ist das Beispiel: https://jsfiddle.net/rypLz1qg/9/

Answer 1

Sie wirklich brauchen schreibe eine wrapper component. Vue erwartet, das DOM zu kontrollieren und nicht, dass Sie DOM-verändernde Dinge wie die * Picker-Aufrufe zu beliebigen Zeiten machen. Eine Komponente gibt Ihnen jedoch die Möglichkeit, Ihrer Komponente mitzuteilen, wie sie mit dem DOM in jedem seiner Lebenszyklus-Hooks interagieren soll, damit das Verhalten konsistent sein kann. Sehen Sie sich die JavaScript-Registerkarte auf der Beispielseite der Wrapper-Komponente an.