I have a Vue.js component where there are groups of text fields ( group of a text field labelled “Start” and another text field labelled “To”) bound to a Vue array ( s.timespans) .
What I want is, when I add another group of text field by adding element to the ( s.timespans ) array, all the textfields get date/timepicker. But unfortunately, now only the first group of field gets the date/timepicker and the other groups don’t. What is the right way of doing this?
Thanks in advance.
<template id="settings"> <div v-for="(k,slot) in s.timespans" class="row mb5"> <div class="col-sm-5"> <label><?php _e( 'From', 'smps' ); ?></label> <input type="text" class="datepicker form-control" v-model="slot.from"> </div> <div class="col-sm-5"> <label><?php _e( 'To', 'smps' ); ?></label> <input type="text" class="datepicker form-control" v-model="slot.to"> </div> <div class="col-sm-2"> <a href="javascript:" class="btn btn-default pull-right btn-xs br0" @click="remove_timeslot(k)"><i class="fa fa-remove"></i></a> </div> </div> <template>
The Vue js code
Vue.component( 'settings', { template : '#settings', data : function () { return { s : { timespans : [ {from : '', to : ''} ] } } }, methods : { add_timeslot : function () { Vue.set(this.s.timespans,this.s.timespans.length,{from:'',to:''}); $('.datepicker').datetimepicker(); }, remove_timeslot : function (k) { this.s.timespans.splice(k,1); }, }, });
Advertisement
Answer
Try this then the DOM will be finished rendering, not before nextTick:
add_timeslot : function () { Vue.set(this.s.timespans,this.s.timespans.length,{from:'',to:''}); this.$nextTick(function () { $('.datepicker').datetimepicker(); }); },
when the function in nextTick is executed, the DOM Element will be rendered.