Vue.js - 无法将 date/timepicker 添加到 vue.js 呈现的 html 元素
Vue.js - can not add date/timepicker to the html element rendered by vue.js
我有一个 Vue.js 组件,其中有一组文本字段(一组标记为 "Start" 的文本字段和另一个标记为 "To" 的文本字段)绑定到一个 Vue 数组( s.timespans)。
我想要的是,当我通过向 ( s.timespans ) 数组添加元素来添加另一组文本字段时,所有文本字段都得到 date/timepicker。但不幸的是,现在只有第一组字段获得 date/timepicker 而其他组没有。这样做的正确方法是什么?
提前致谢。
<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);
},
},
});
试试这个然后 DOM 将完成渲染,而不是在 nextTick:
之前
add_timeslot : function () {
Vue.set(this.s.timespans,this.s.timespans.length,{from:'',to:''});
this.$nextTick(function () {
$('.datepicker').datetimepicker();
});
},
当 nextTick 中的函数执行时,DOM 元素将被渲染。
我有一个 Vue.js 组件,其中有一组文本字段(一组标记为 "Start" 的文本字段和另一个标记为 "To" 的文本字段)绑定到一个 Vue 数组( s.timespans)。
我想要的是,当我通过向 ( s.timespans ) 数组添加元素来添加另一组文本字段时,所有文本字段都得到 date/timepicker。但不幸的是,现在只有第一组字段获得 date/timepicker 而其他组没有。这样做的正确方法是什么?
提前致谢。
<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);
},
},
});
试试这个然后 DOM 将完成渲染,而不是在 nextTick:
之前 add_timeslot : function () {
Vue.set(this.s.timespans,this.s.timespans.length,{from:'',to:''});
this.$nextTick(function () {
$('.datepicker').datetimepicker();
});
},
当 nextTick 中的函数执行时,DOM 元素将被渲染。