日付が正しくロードされていません。vue.js

Question

getDate()機能を使用して、current dateを入力フィールドに表示します。だから私は入力フィールドの1つにride.dateをバインドしています。

しかし、私は他の分野の1つにおける1つの文字を記入した後、日付が置かれているいくつかの理由で...

あなたは以下の通りです:)

をここで短いスクリーンキャストです：

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

ページロード直後に日付を表​​示するにはどうすればよいですか？ data機能で

<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

、代わりに空のオブジェクトとしてrideを初期化するのは、このようにそれを初期化する必要があります。

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

これはあなたの問題を解決しなければなりません。何が起こっているかを理解するには

、あなたは別の可能な解決策は、コンポーネントの$set方法を使用することであることがわかりますhttp://vuejs.org/guide/reactivity.html

で「Change Detection Caveats」と「Initialize Your Data」ドキュメントのセクションをお読みください。だから、

、その代わりに、あなたのgetDate関数の最後に、あなたがそれを使用してride.dateプロパティを設定できます

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