Vue.js 2：在安裝組件之前通過http.get設置prop值

我想從我的服務器獲取數據來填充vuejs中的道具或數據。Vue.js 2：在安裝組件之前通過http.get設置prop值

基本上我需要傳遞數據作爲我的組件的參數。

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 
     }); 
    }

我需要從網址獲取數據，但我不知道如何使它工作。我試過計算，道具和方法，但他們沒有工作...

我需要從從我的服務器，而不是從可變recursos_data返回值獲得數據。如何在vuejs中實現這一點？

來源

2017-04-02 Jaqueline Passos

什麼是不工作？ – Bert

@BertEvans我從我打印數據的變量中獲取數據。相反，我需要從http.get請求獲取這些數據。我創建了一個獲取數據的方法。我調用方法來獲取「mounted」內的值，它在console.log命令中輸出正確的數據，但是當我將'resources：self.recursos_data'更改爲'resources：時，它不會在我的組件中設置數據。 self.meus_recursos'。我需要在裝載之前加載數據。 –

爲什麼不能使用'created'事件設置數據？這是在安裝的事件之前完成的。 – webnoob

我希望你的問題是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 
     }); 
    }); 
}

或者，你可以調用fullCalendar在getResources權之後。

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 
      }); 
     }) 
    }); 
}

或者，您甚至無法安裝該組件直到檢索到數據。

來源

2017-04-02 21:45:34 Bert

我已經結束了使用第一個解決方案，它按預期工作，給我想要的結果。謝謝@ bert-evans =） –

答案是：你不能。

你需要切換你的心態。每個組件都是被動的，並且應該根據它的模型顯示自己。從服務器下載數據時，不能「停止」組件。我看到在你的這種情況下的兩種解決方案：

通過顯示一些throbber或只是空列表處理「數據未就緒」狀態。如果您正在更改內部數據或更改父組件中的道具，則無關緊要。您可以添加像dataReady這樣的標誌到數據，並在您的ajax完成後將其設置爲true。在你的模板中，你會有一些if語句使用這個標誌來顯示throbber或數據。
只有在數據準備就緒後，才能從其父組件控制它並顯示組件1。

沒有其他辦法。

來源

2017-04-02 21:44:01 damienix

Vue.js 2：在安裝組件之前通過http.get設置prop值

回答

相關問題