1. 程式人生 > >vue錯誤筆記——vue使用boostrap的datepicker 資料無法繫結與無法提交(二)

vue錯誤筆記——vue使用boostrap的datepicker 資料無法繫結與無法提交(二)

上一篇中,使用vue.set解決了問題,但只是向後臺提交資料時StartTime與EndTime兩個欄位有值,當修改其他欄位,觸發v-model重新繫結資料時,StartTime與EndTime兩個欄位的值又消失了,並沒有很好的解決問題。

我又在網上找了另一種方法,(ps:原部落格地址找不了)通過隱藏datetimepicker 的同時繫結資料,解決了消失的問題,原理還沒理解清楚,暫且先把程式碼放上來。


 var editVM = new Vue({
        el: "#Edit_VM",
        data:{
            
            activity: {
                StartTime: '',
                EndTime: '', 
            },
           
          
          
        },
        methods: {
             setDateTime: function () {
                 $("#StartTime").datetimepicker({
                    autoclose: true,
                    todayBtn:true,
                    todayHighLight: true,
                    language: 'zh-CN'
                });
                $("#EndTime").datetimepicker({
                    autoclose: true,
                    todayBtn: true,
                    todayHighLight: true,
                    language: 'zh-CN'
                });
                //隱藏的同時繫結資料
                $("#StartTime").datetimepicker().on('hide', function (ev) {
                    var startTime = $("#StartTime").val();
                    _self.StartTime = startTime;
                });
                $("#EndTime").datetimepicker().on('hide', function (ev) {
                    var endTime = $("#EndTime").val();
                    _self.EndTime = endTime;
                });
            }
        }