Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Pre-Caching Other Folders and Files for Faster Navigation Chapter 7

The process of the method will be:

1. Set the loading state as active in the app. This lets the user know something is
   happening.


2. Create an empty structure object.


3. Load the contents of the getFolderStructure method.


4. Loop through the result and add each item to either the folders or files array.


5. Set the global structure object to the new one created.


6. Set the loading state to false so the contents can be displayed.

Set the loading state to true and create an empty structure object

The first step of this method is to hide the structure tree and show the loading message.
This can be done as before, by setting the isLoading variable to true. We can also create

our empty structure object here, ready to be populated by the data:

displayFolderStructure() {

this.isLoading = true;

const structure = {

folders: [],

files: []

}

}

Load the contents of the getFolderStructure method

As the getFolderStructure method returns a promise, we need to resolve the result

before proceeding on to manipulate it. This is done with the .then() function; we have

already used this with the Dropbox class. Call the method and then assign the result to a
variable:

displayFolderStructure() {

this.isLoading = true;

const structure = {

folders: [],

files: []

}