Vue error notes (1)-Datepicker data using boostrap in vue cannot be bound and cannot be submitted (1)

There are two problems with datepicker:

1. Unable to bind

After selecting the start time and end time , go to modify other fields, the start time and end time will be cleared.

When looking for a solution online, refer to this http://www.youtiy.com/detail_308.html to solve this problem

By vue.set datetimepicker of the callback function with a start time , end time of the two fields assigned; editVM.activity entity, "StartTime" is the attribute of the entity, the startTime value, may refer to a specific method Vue.set document ,

var  editVM = new Vue({
        el: "#Edit_VM",
        data:{
            
            activity: {
                   StartTime:'',
                   EndTime:'',
                   Name:'',
            },                                           
          
        },
        mounted:function(){
            var _self = this;
            $(".datetimepicker").datetimepicker({
                autoclose: true,
                todayHighLight: true,
                language: 'zh-CN'

            }).on('changeDate', function (ev) {
                var _self = this;
                var startTime = $("#StartTime").val();
                var endTime = $("#EndTime").val();
                 /*
                   *editVM换成_self.activity报错，不知道为什么*
                   */
                Vue.set(editVM.activity, "StartTime", startTime);
           
                Vue.set(editVM.activity, "EndTime", endTime);

                
            }); 

        }

 

2. Unable to submit data

At this point you can bind v-model with the start time and end time tips StartTime and EndTime is empty in activity object, submit data;

My guess is that StarTime and EndTime cannot be bound to v-model, so I put these two values ​​in another object Time.

 data:{         
            activity: {
                 Name:'',  
            },
         
            Time: {
                StartTime: '',
                EndTime: '',
            }                  
          
     },
mounted：function(){
     var _self = this;
            $(".datetimepicker").datetimepicker({
                autoclose: true,
                todayHighLight: true,
                language: 'zh-CN'

            }).on('changeDate', function (ev) {
                var _self = this;
                var startTime = $("#StartTime").val();
                var endTime = $("#EndTime").val();
                //改成Time对象
                Vue.set(editVM.Time, "StartTime", startTime);
                Vue.set(editVM.Time, "EndTime", endTime);

               
       });
}

Pass the data through the Time object, and then you can pass it over:

 

 

I think this method is not perfect, and I found another solution on the Internet. See the next article for details.

Vue uses boostrap datepicker data cannot be bound and cannot be submitted (2)