日期加载不正确vue.js

Question

使用函数getDate()我想在输入字段中显示current date。这就是为什么我将ride.date绑定到其中一个输入字段。

但由于某些原因我填一个字母在其他领域中的一个之后的日期被放置...

你以下:)

这里是一个简短截屏：

https://drive.google.com/file/d/0ByeuR1N3nhXIMFpZVXRrU1Y2NlE/view

那么如何在页面加载后立即显示日期？

<template> 
    <div class="row center"> 
    <div class="panel ride"> 
     <div class="ride-title bar-underline"> 
     <div class="ride-item-title"> 
      <strong class="ride-item-title-body">Maak hier uw rit aan</strong> 
     </div> 
     </div> 

     <div class="ride-item bar-underline"> 
     <div class="ride-item-title"> 
      <p>Name</p> 
     </div> 

     <div class="ride-item-content"> 
      <p><input class="form-group-item-special" v-model="ride.name"/></p> 
     </div> 
     </div> 

     <div class="ride-item bar-underline"> 
     <div class="ride-item-title"> 
      <p>Datum</p> 
     </div> 

     <div class="ride-item-content"> 
      <p><input class="form-group-item-special" v-model="ride.date"/></p> 
     </div> 
     </div> 
    </div>    
</template> 

<script> 

import Banner   from '../Banner.vue'; 
import RideService  from '../../services/RideService'; 
import TypeService  from '../../services/TypeService'; 
import LocationService from '../../services/LocationService'; 

export default { 

    components: { Banner }, 

    data() { 
    return { 
     title: 'Nieuwe rit', 
     ride: {}, 
     types: {}, 
     locations: {} 
    } 
    }, 

    methods: { 
    getTypes() { 
     TypeService.All() 
     .then(function(data) 
     { 
      if(data.data.types.data != null) 
      { 
      this.types = data.data.types.data; 
      }   
     }.bind(this)); 
    }, 

    getLocations() { 
     LocationService.All() 
     .then(function(data) 
     { 
      if(data.data.locations.data) 
      { 
      this.locations = data.data.locations.data; 
      }   
     }.bind(this)); 
    }, 

    getDate() { 
     var _this = this; 
     var currentDate = new Date(); 
     var day = currentDate.getDate(); 
     var month = currentDate.getMonth() + 1; 
     var year = currentDate.getFullYear(); 

     day = this.checkDateForZero(day); 
     month = this.checkDateForZero(month); 

     this.ride.date = year + "-" + month + "-" + day + " " + "00:00:00"; 
    }, 

    checkDateForZero (date) { 
     if(date <= 9) { 
     date = "0" + date; 
     } 
     return date; 
    }, 

    store() { 
     RideService.store(this.ride, this); 
    }, 

    success (message) { 
     swal({ 
     title: "Succes", 
     text: message.success, 
     type: "success", 
     timer: 2000, 
     showConfirmButton: false 
     }); 

     this.ride = { user: {}, location: {}, type: {} }; 
     this.getDate(); 
    }, 

    showError (message) { 
     var errorString = ''; 
     if (message.hasOwnProperty('error')) { 
      for(var prop in message.error) { 
       if (Array.isArray(prop)) { 
        for (var msg in prop) { 
         errorString += message.error[prop] + '<BR>'; 
        } 
       } 
       else { 
       errorString += message.error[prop] + '<BR>'; 
       } 
      } 
     }; 

     swal({ 
     title: "Fout", 
     text: errorString, 
     type: "error", 
     timer: 2000, 
     html: true, 
     showConfirmButton: false 
     }); 
    } 
    }, 

    ready() { 
    this.getDate(); 
    this.getTypes(); 
    this.getLocations(); 
    } 
} 
</script> 

Answer 1

在data功能，而不是初始化ride为空对象，你应该这样初始化：

ride: { name: '', date: '' }, 

这应解决您的问题。

要了解到底是怎么回事，请http://vuejs.org/guide/reactivity.html

阅读“Change Detection Caveats”和“Initialize Your Data”文档章节你会看到另一种可能的解决方案是使用组件的方法$set。

所以，或者，在你getDate函数结束时，你可以设置使用它的ride.date属性：

this.$set('ride.date', year + "-" + month + "-" + day + " " + "00:00:00");