日期没有正确加载vue.js

使用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>

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

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