Using vue js with selectpicker

Question

I use Vue.js to add multiple lines, each line contains two datetimepicker inputs and a bootstrap selection.

My problem is when I fill in the input and click to add a new line that the previous ones clear, the reason is that every time I add a new line I use setTimeout to abstract selectpicker and datetimepicker.

So, I want to know if there is a way to run the last added item without updating 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(); } }); 

Here is an example: https://jsfiddle.net/rypLz1qg/9/

Answer 1

You really need to write a shell component . Vue expects DOM control, not for you to do DOM-changing things, such as calling * picker at arbitrary points in time. However, a component gives you the opportunity to tell your component how to interact with the DOM in each of its life cycles so that its behavior can be consistent. See the JavaScript tab on the shell component example page.