javascript - vue.js 日期未正确加载

Question

使用函数getDate()，我想在输入字段中显示当前日期。这就是为什么我将ride.date 绑定(bind)到输入字段之一。

但由于某种原因，日期是在我在其他字段之一中填写一个字母之后放置的......

你在关注吗:)

这是一个简短的截屏视频:

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: '' },

这将解决您的问题。

要了解发生的情况，请阅读 Change Detection Caveats 处的“Initialize Your Data ”和“http://vuejs.org/guide/reactivity.html ”文档部分

您将看到另一种可能的解决方案是使用组件的 $set 方法。

因此，或者，在 getDate 函数的末尾，您可以使用它设置 ride.date 属性:

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