layDate动态绑定多个日期控件初始化的问题

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

转载于:https://my.oschina.net/mingriyi/blog/2994999