ウォッチャーからの返信結果 - Vue JS

Question

私は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}}を使ってみましたが、必要な変数 'c​​ancelBy'を取得できませんでした。

Answer 1

ただ、新しいデータプロパティcancelBy追加：

data() { 
    return { 
    date: '', 
    cancelBy: null, 
    } 
}, 

をそして時に非同期呼び出しが戻ることを設定します。

：

let vm = this; 
this.$http.get(...).then(() => { 
    ... 
    vm.cancelBy = inAdvanceDate.format("YYYY-MM-DD, HH:mm:ss a"); 
} 

そして、あなたのテンプレートでは、あなたがこのような何かを行うことができます

<div v-if="date !== ''"> 
    {{ date }}. 
    <span v-if="cancelBy !== null> 
    By {{ cancelBy }} 
    </span> 
</div>