使用函数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>
答案 0 :(得分: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");