Pre-Caching Other Folders and Files for Faster Navigation Chapter 7Update the global structure object and remove the loading state
The last task in this method is to update the global structure and remove the loading state.
This code is unchanged from before:
displayFolderStructure() {
this.isLoading = true;const structure = {
folders: [],
files: []
}
this.getFolderStructure(this.path).then(data => {
for (let entry of data) {
// Check ".tag" prop for type
if(entry['.tag'] == 'folder') {
structure.folders.push(entry);
} else {
structure.files.push(entry);
}
}
this.structure = structure;
this.isLoading = false;
});
}We now have a method that will display the result of our data retrieval.
Instigating the method
This method can now be called when the dropbox-viewer component gets created. The
path will already be populated, thanks to the created function on the global Vue instance
that commits the URL hash to the store, thus creating the path variable. Because of this, we
don't need to pass anything to the function. Add the created function to your component
and call the new method inside:
Vue.component('dropbox-viewer', {
template: '#dropbox-viewer-template',
data() {
return {
accessToken: 'XXXX',
structure: {},
isLoading: true
}