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元素将被渲染。