Vue.js 2：コンポーネントがマウントされる前にhttp.getを介してprop値を設定する

Question

サーバーからデータを取得してvuejsの小道具やデータを取り込みたいと考えています。

基本的に、私のコンポーネントのパラメータとしてデータを渡す必要があります。

data() { 
     return { 
      recursos_data : [ 
        { id: 'a', title: 'Room A' }, 
        { id: 'b', title: 'Room B', eventColor: 'green' }, 
        { id: 'c', title: 'Room C', eventColor: 'orange' }, 
        { id: 'd', title: 'Room D', eventColor: 'red' } 
       ], 
      meus_recursos: [] 
     } 
    }, 
    methods: { 
     getResources: function() { 
      var self = this; 
      Vue.http.get('/admin/getResources').then((response) => { 
       _.forEach(response.data.resources,function(item){ 
        self.meus_recursos.push(item); 
       }); 
       console.log(self.meus_recursos); 
       return self.meus_recursos; 
      }); 
     }, 
    }, 
    mounted() { 
     const cal = $(this.$el), 
      self = this; 

     self.getResources(); 

     cal.fullCalendar({ 
      header: this.header, 
      defaultView: this.defaultView, 
      editable: this.editable, 
      selectable: this.selectable, 
      selectHelper: this.selectHelper, 
      aspectRatio: 2, 
      slotDuration: '00:10:00', 
      timeFormat: 'HH:mm', 
      eventSources: self.eventSources, 
      events: self.events, 
      resources: self.recursos_data, 
      fixedWeekCount: false, 
      firstDay: 1 
     }); 
    } 

URLからデータを取得する必要がありますが、動作させる方法がわかりません。 私は私のサーバーからではなく、変数recursos_dataから返された値からデータを取得する必要があります...

を私は計算し、小道具、及び方法を試してみたが、彼らは動作しません。どのようにしてvuejsでこれを達成できますか？

Answer 1

fullCalendarと非同期メソッドの間にいくつかのやり取りがあると思いますが、データが返された後にfullCalendarを初期化したいとします。

getResourcesメソッドから約束を返すのはどうですか？

methods: { 
    getResources: function() { 
     var self = this; 
     return Vue.http.get('/admin/getResources').then((response) => { 
      _.forEach(response.data.resources,function(item){ 
       self.meus_recursos.push(item); 
      }); 
     }); 
    }, 
}, 

mounted() { 
    const cal = $(this.$el), 
     self = this; 

    self.getResources().then(() => { 
     cal.fullCalendar({ 
      header: this.header, 
      defaultView: this.defaultView, 
      editable: this.editable, 
      selectable: this.selectable, 
      selectHelper: this.selectHelper, 
      aspectRatio: 2, 
      slotDuration: '00:10:00', 
      timeFormat: 'HH:mm', 
      eventSources: self.eventSources, 
      events: self.events, 
      resources: self.meus_recursos, 
      fixedWeekCount: false, 
      firstDay: 1 
     }); 
    }); 
} 

それとも、あなたは右のその後getResourcesでfullCalendarを呼び出すことができます。

getResources: function() { 
    var self = this; 
    return Vue.http.get('/admin/getResources') 
     .then((response) => { 
      _.forEach(response.data.resources,function(item){ 
       self.meus_recursos.push(item); 
     }) 
     .then(() => { 
      $(this.$el).fullCalendar({ 
       header: this.header, 
       defaultView: this.defaultView, 
       editable: this.editable, 
       selectable: this.selectable, 
       selectHelper: this.selectHelper, 
       aspectRatio: 2, 
       slotDuration: '00:10:00', 
       timeFormat: 'HH:mm', 
       eventSources: self.eventSources, 
       events: self.events, 
       resources: self.meus_recursos, 
       fixedWeekCount: false, 
       firstDay: 1 
      }); 
     }) 
    }); 
} 

また、データを取得するまでコンポーネントをマウントすることもできませんでした。

Answer 2

答えはではありませんです。

あなたの考え方を切り替える必要があります。すべてのコンポーネントは反応的であり、モデルに応じてそれ自身を表示する必要があります。サーバーからデータをダウンロードしている間は、コンポーネントを停止することはできません。いくつかのスロバーまたは単に空のリストを表示して

1. ハンドル「データの準備ができていません」の状態：私はあなたのこのような状況で2つのソリューションを参照してください。内部コンポーネントのデータを変更したり、親コンポーネントからの変更を行っている場合は問題ありません。 dataReadyのようなフラグをデータに追加し、ajaxの終了後にtrueに設定することができます。テンプレートには、このフラグを使用してスローバーまたはデータを表示するif文がいくつかあります。
2. 親コンポーネントから制御し、データの準備ができた後にコンポーネント1を表示します。

他の方法はありません。