Layui+vue 日期控件初始化日期绑定问题

Layui+vue 日期控件初始化日期绑定问题

问题说明：

<div class="layui-inline layui-col-md6 layui-col-sm6 layui-col-xs6">
    <label class="layui-form-label"><span style="color: red">*</span>申请减免金额/元:</label>
    <div class="layui-input-inline">
        <input  type="text" class="layui-input searchVal" lay-verify="creditAmount_verify" v-model="costRelief.creditAmount"   oninput="value=moneyInput(value)"  placeholder="请输入减免金额/元" />
    </div>
</div>
<div class="layui-inline layui-col-md6 layui-col-sm6 layui-col-xs6">
    <label class="layui-form-label"><span style="color: red">*</span>申请时间:</label>
    <div class="layui-input-inline">
        <input type="text" id="applyTimeStr" readonly v-model="costRelief.applyTime"  lay-verify="applyTime_verify"  placeholder="请选择申请时间日期" class="layui-input">
     </div>
 </div>

var vm = new Vue({
    el: '#rrapp',
    data: {
        order:{},
        costRelief:{ },
        //附件
        deliveryFileLst:[],
        deliveryFileLstId: 'deliveryFileLstId_0',
    },
    computed: {},
    created: function(){
        var _this = this;
        var param = parent.layer.boxParams.boxParams;
        _this.order = param.data;
    },
    updated: function () {
        layui.form.render();
    },
    methods: {
        saveOrUpdate: function () {
             //子订单id
            vm.costRelief.orderCarId =vm.order.orderCar.orderId;
            vm.costRelief.customerId =vm.order.customerId;
            vm.costRelief.sysAccessoryEntityList = vm.deliveryFileLst;

            $.ajax({
                type: "POST",
                url: baseURL + "costrelief/cosrelief/save",
                contentType: "application/json",
                data: JSON.stringify(vm.costRelief),
                success: function (r) {
                    if (r.code === 0) {
                        alert('操作成功', function (index) {
                            parent.layer.closeAll();
                        });
                    } else {
                        alert(r.msg);
                        parent.layer.closeAll();
                    }
                }
            });
        },

        cancel: function () {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        },
        delDeliveryFile: function (id) {
            for (var i = 0; i < vm.deliveryFileLst.length; i++) {
                if (vm.deliveryFileLst[i].id === id) {
                    vm.deliveryFileLst.splice(i, 1);
                    i = i - 1;
                }
            }
        },
        downDoc: function (fileName, url) {
            var uri = baseURL + 'file/download?uri='+url+"&fileName="+fileName;
            window.location.href = uri;
        },
        showDoc: function (fileName, url) {
            if (viewer != null){
                viewer.close();
                viewer = null;
            }
            viewer = new PhotoViewer([
                {
                    src: fileURL+url,
                    title: fileName
                }
            ], {
                appendTo:'body',
                zIndex:99891018
            });
        },
    }
});

初始化 costRelief:{ }, 对象未赋值；

layui 日期控件添加了 value属性

function initDate(laydate) {
    laydate.render({
        elem: '#applyTimeStr',
        type: 'datetime',
     // type: 'date',
        value:new Date(),
        trigger: 'click',
        done: function (value) {
            vm.costRelief.applyTime = value;
        }
    });
}

修改后的代码–解决问题

var vm = new Vue({
    el: '#rrapp',
    data: {
        order:{},
        costRelief:{
            applyTime:new Date().format("yyyy-MM-dd hh:mm:ss")
        },
        //附件
        deliveryFileLst:[],
        deliveryFileLstId: 'deliveryFileLstId_0',
    },
    computed: {},
    created: function(){
        var _this = this;
        var param = parent.layer.boxParams.boxParams;
        _this.order = param.data;
    },
    updated: function () {
        layui.form.render();
    },
    methods: {
        saveOrUpdate: function () {
             //子订单id
            vm.costRelief.orderCarId =vm.order.orderCar.orderId;
            vm.costRelief.customerId =vm.order.customerId;
            vm.costRelief.sysAccessoryEntityList = vm.deliveryFileLst;

            $.ajax({
                type: "POST",
                url: baseURL + "costrelief/cosrelief/save",
                contentType: "application/json",
                data: JSON.stringify(vm.costRelief),
                success: function (r) {
                    if (r.code === 0) {
                        alert('操作成功', function (index) {
                            parent.layer.closeAll();
                        });
                    } else {
                        alert(r.msg);
                        parent.layer.closeAll();
                    }
                }
            });
        },

        cancel: function () {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        },
        delDeliveryFile: function (id) {
            for (var i = 0; i < vm.deliveryFileLst.length; i++) {
                if (vm.deliveryFileLst[i].id === id) {
                    vm.deliveryFileLst.splice(i, 1);
                    i = i - 1;
                }
            }
        },
        downDoc: function (fileName, url) {
            var uri = baseURL + 'file/download?uri='+url+"&fileName="+fileName;
            window.location.href = uri;
        },
        showDoc: function (fileName, url) {
            if (viewer != null){
                viewer.close();
                viewer = null;
            }
            viewer = new PhotoViewer([
                {
                    src: fileURL+url,
                    title: fileName
                }
            ], {
                appendTo:'body',
                zIndex:99891018
            });
        },
    }
});

1.初始化给对象属性赋值,并进行格式化（一定需要格式化）

costRelief:{
            applyTime:new Date().format("yyyy-MM-dd hh:mm:ss")
},

2.修改日期控件，取消value 属性,type 改为 datetime

function initDate(laydate) {
    laydate.render({
        elem: '#applyTimeStr',
        type: 'datetime',
        trigger: 'click',
        done: function (value) {
            vm.costRelief.applyTime = value;
        }
    });
}