Navigating through the File Tree and Loading Folders from the URL Chapter 5First, in the getFolderStructure function, we can remove the first line where the URL
hash gets set to the path. This is because the URL has already been updated when the link
is used. Remove this line from your code:
window.location.hash = path;Second, there is now repetition in the Dropbox component with the this.path variable
and the p prop. Eliminating this requires some slight reworking, as you are not allowed to
modify a prop directly as you are with the path; however, it needs to be kept in sync so the
breadcrumb can be correctly rendered.
Remove the path property from the data object in the Dropbox component, and also delete
the this.path = path line from the getFolderStructure function.
Next, update the prop to be equal to path, not p. This will also require the watch function
to be updated to watch the path variable and not p().
Update the created method to just use this.path as the parameter to the function. The
Dropbox component should now look like this:
Vue.component('dropbox-viewer', {
template: '#dropbox-viewer-template',
props: {
path: String
},
data() {
return {
accessToken: 'XXXX',
structure: {},
isLoading: true
}
},
methods: {
dropbox() {
return new Dropbox({
accessToken: this.accessToken
});
},
getFolderStructure(path) {
this.dropbox().filesListFolder({
path: path,
include_media_info: true
})
.then(response => {
const structure = {
folders: [],