日期未正确加载vue.js

Question

With the function getDate() I would like to show the current date in a input field. That's why I've bind ride.date to one of the input fields.

But for some reason the date is placed after I fill in one letter in one of the other fields...

Are you following :)

Here is a short screencast:

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

So how can I show the date immediately after page load?

   <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

In the data function, instead of initializing ride as an empty object, you should initialize it like this:

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

This shall resolve your issue.

To understand what is going on, please read the " Change Detection Caveats " and " Initialize Your Data " documentation sections at http://vuejs.org/guide/reactivity.html

You will see that another possible solution is to use the $set method of the component.

So, alternatively, in the end of your getDate function, you could set the ride.date property using it:

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