layDate实现多个日期绑定
//同时绑定多个
lay('.test-item').each(function(){
laydate.render({
elem: this ,
trigger: 'click'
});
});
在vue动态生成的页面,使用ajax获取数据,初始化页面的时候使用以上的方法,无法绑定。因为vue还未渲染完成,layDate无法找到dom元素绑定。
解决办法:在vue的watch中监听要绑定渲染的对象,使用$nextTick绑定日期控件。
layDate实现多个日期绑定+vue会出现layDate修改了input的值,但是vue却没有修改过来。下面是范例:
html代码:
<div class="body_box">
<ul class="timeList">
<li v-for="val in data"><span v-text="val.序号"></span><input class="time" type="text" v-model="val.日期"/></li>
</ul>
</div>
js代码:
var vue_data = {
timeIndex:0,
data:[
{
序号:"1",
日期:getData()
},
{
序号:"2",
日期:getData()
},
{
序号:"3",
日期:getData()
},
{
序号:"4",
日期:getData()
},
{
序号:"5",
日期:getData()
},
]
}
var vm = new Vue({
el:".body_box",
data:vue_data,
methods:{
changeTime:function(index){
this.timeIndex = index;
}
},
});
$(function(){
lay('.time').each(function(){
laydate.render({
elem: this,
trigger: 'click',
fontmat:"YYYY-MM-dd",
done:function(val){
vm.data[vm.timeIndex].日期 = val;
}
});
});
})
//日期格式化
function getData() {
var data = new Date();
var h = data.getFullYear();
var m = data.getMonth()+1;
var d = data.getDate();
if(m<10){
m="0"+m;
}
if(d<10){
d="0"+d;
}
return h+"-"+m+"-"+d;
}
layDate修改了input的值但是却不会修改vue的值,结果如下:
我们需要修改代码,最终代码如下:
html代码
<div class="body_box">
<ul class="timeList">
<li v-for="(val,index) in data"><span v-text="val.序号"></span><input class="time" type="text" v-model="val.日期" v-on:click="changeTime(index)"/></li>
</ul>
</div>
js代码
var vue_data = {
timeIndex:0,
data:[
{
序号:"1",
日期:getData()
},
{
序号:"2",
日期:getData()
},
{
序号:"3",
日期:getData()
},
{
序号:"4",
日期:getData()
},
{
序号:"5",
日期:getData()
},
]
}
var vm = new Vue({
el:".body_box",
data:vue_data,
methods:{
changeTime:function(index){
this.timeIndex = index;
}
},
});
$(function(){
lay('.time').each(function(){
laydate.render({
elem: this,
trigger: 'click',
fontmat:"YYYY-MM-dd",
done:function(val){
vm.data[vm.timeIndex].日期 = val;
console.log(val)
console.log(vm.timeIndex);
console.log(vm.data[vm.timeIndex]);
}
});
});
})
//日期格式化
function getData() {
var data = new Date();
var h = data.getFullYear();
var m = data.getMonth()+1;
var d = data.getDate();
if(m<10){
m="0"+m;
}
if(d<10){
d="0"+d;
}
return h+"-"+m+"-"+d;
}