Мне нужно вернуть результат, который я получаю от наблюдателя в Vue JS.
Это часть компонента.
<template>
<input name="date" v-model="date" id="date-picker">
<div class="alert alert-info" role="alert">
You must cancel {{ trip.in_advance }} days in advance from
<div v-if="date !== ''">
{{ date }}.
By {{ I need to display the result returned from the 'date' watcher here }}
</div>
<div v-else>
your selected booking date.
</div>
</div>
</template>
<script>
import moment from "moment";
import VueMomentJS from "vue-momentjs";
Vue.use(VueMomentJS, moment);
export default{
props: ['trip', 'user'],
data() {
return {
date: ''
}
},
watch: {
date() {
this.$http.get('/trip/dates/'+this.trip.id, this.$data).then(() => {
// Get the selected date, and format it
let bookingDate = moment(this.date).format("YYYY-MM-DD, HH:mm:ss a");
// Get the selected date, and subtract the "in advance" date from trip
let inAdvanceDate = moment(bookingDate).subtract(this.trip.in_advance, 'days');
let cancelBy = inAdvanceDate.format("YYYY-MM-DD, HH:mm:ss a");
console.log(cancelBy);
}, (response) => {
console.log(response);
});
}
}
}
</script>
Когда я использую console.log(cancelBy), я получаю дату, которую мне нужно отобразить в шаблоне. Я вставил комментарий там, где он мне нужен в шаблоне. Я пытался просто использовать {{ date() }}, {{ date }}, но это не даст нужных мне данных переменной 'cancelBy'.
this, чтобы он больше не указывал на экземпляр Vue. Я не мог вспомнить, было ли это так в этом примере, поэтому я устанавливал ссылку на всякий случай. См. Использование этого во Vue 18.07.2017