Experimenting with VueJS 2.0 RC and utilizing the fetch API to retrieve data for certain components. Here's a sample scenario:
const Component = {
template: '#comp',
name: "some-component",
data: function () {
return {
basic: data.subset,
records: function () {
return fetch('/datasource/api', {
method: 'get'
}).then(function (response) {
return response.json();
}).then(function (response) {
if (response.status == "success") {
return response.payload;
} else {
console.error(response.message);
}
}).catch(function (err) {
console.error(err);
});
}
}
}
};
The data object represents a global application state, defined prior to the app's initialization. Only a portion of it is necessary in the component, hence the subset. The primary set of data for the component originates from another endpoint that I'm attempting to access. However, the data property requires an object, yet it's receiving a Promise that can't be effectively utilized within a loop in the template for rendering, such as v-for="record in records".
Am I approaching this incorrectly? How can I ensure the records property updates once it's completely fetched? Is there a way to make the code wait until the promise resolves (essentially making it synchronous)? The component is essentially nonfunctional without data, so there will always be a period of waiting before it can be utilized.
What is the most appropriate method to asynchronously populate a component's data field without relying on plugins like vue-async or vue-resource?
(While I could use XHR/jQuery methods for non-promise ajax calls, I am interested in learning how to achieve this using fetch)
Update: I attempted implementing a created hook and a method to load the data, similar to this but encountered issues - in my experiments, the records property fails to update once it's loaded. Despite successfully retrieving the data (as confirmed by console logs).
This might be related to my usage of vue-router and the component being triggered when a link is clicked, rather than being a standard Vue component. Further investigation is required...
Update #2: Continuing to explore the jsfiddle approach above and logging this.records and response.payload to the console, it shows the records object being populated. However, this does not seem to trigger a change in the template or the component itself - Vue dev tools inspection reveals that the records property remains an empty array. Even if I add a method logstuff and a button in the template to call it, and the method logs this.records in the console, it still logs an observer with an empty array:
https://i.sstatic.net/XB0kC.png
Now, I am questioning why the data property of a component is not updated even after being explicitly set to a different value. I attempted setting up a watcher for $route triggering the reload method, but with no success - every subsequent load of that route does trigger a re-fetch, and console logs show this.records as populated (from within fetch), but the actual this.records property remains an empty array.