Vue js - 無法將日期/時間選擇器添加到由vue渲染的html元素js

Question

我有一個Vue js組件，其中有一組文本字段（文本字段的組標記爲「開始」和另一個文本字段標記爲「To 「）綁定到Vue數組（s.timespans）。

我想要的是，當我通過向（s.timespans）數組添加元素來添加另一組文本字段時，所有文本字段都會獲取日期/時間選擇器。但不幸的是，現在只有第一組字段獲取日期/時間選擇器，而其他組沒有。這樣做的正確方法是什麼？

在此先感謝。

<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> 

的Vue公司的js代碼

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

     }, 

    }); 

Answer 1

試試這個，則DOM將完成渲染，不nextTick前：

 add_timeslot : function() { 
      Vue.set(this.s.timespans,this.s.timespans.length,{from:'',to:''}); 
      this.$nextTick(function() { 
       $('.datepicker').datetimepicker(); 
      }); 
     }, 

當nextTick功能被執行，DOM元素將被渲染。