My goal is to fetch data from my server and use that data to populate a prop or data in vuejs.
Essentially, I am looking to pass the fetched data as a parameter of my component.
data() {
return {
resources_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' }
],
my_resources: []
}
},
methods: {
getServerData: function() {
var self = this;
Vue.http.get('/admin/getResources').then((response) => {
_.forEach(response.data.resources,function(item){
self.my_resources.push(item);
});
console.log(self.my_resources);
return self.my_resources;
});
},
},
mounted() {
const cal = $(this.$el),
self = this;
self.getServerData();
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.resources_data,
fixedWeekCount: false,
firstDay: 1
});
}
I am struggling with retrieving data from a URL in vuejs. I have tried using computed, props, and method, but none seem to be working...
Is there a way to retrieve data directly from the server response instead of relying on the hardcoded variable resources_data? Any tips or suggestions would be greatly appreciated!