Navigating through the File Tree and Loading Folders from the URL Chapter 5Create a new method on the Dropbox component with the same name as the value of the
v-on attribute, in this case updateStructure. This method will have one parameter,
which is the path we emitted earlier. From here, we can trigger our original
getFolderStructure method using the path variable:
updateStructure(path) {
this.getFolderStructure(path);
}Viewing our app in the browser should now list the folders and links and, when clicked,
show the contents of the new folder.
When doing so, however, there are a couple of issues that are raised. Firstly, the files and
folders are appended to the existing list rather than replacing it. Secondly, there is no
feedback to the user that the app is loading the next folder.
The first issue can be resolved by clearing the folder and file arrays before appending the
new structure. The second can be addressed by utilizing the loading screen we used at the
beginning of the app - this will give the user some feedback.
To address the first issue, create a new structure object inside the success promise
function for the getFolderStructure method. This object should replicate that of the
structure object in the data object. This should set blank arrays for both files and folders.
Update the for loop to use the local structure arrays rather than the component ones.
Lastly, update the component structure object with the new version, including the
updated files and folders:
getFolderStructure(path) {
this.dropbox().filesListFolder({
path: path,
include_media_info: true
})
.then(response => {
const structure = {
folders: [],
files: []
}
for (let entry of response.entries) {
// Check ".tag" prop for type
if(entry['.tag'] == 'folder') {
structure.folders.push(entry);
} else {
structure.files.push(entry);
}
}
this.structure = structure;