日期加載不正確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");