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

Navigating through the File Tree and Loading Folders from the URL Chapter 5

return output;

}

},

methods: {

navigate(folder) {

this.$emit('path', folder.path);

}

}

});

Adding the ability to download files

Now that our users can navigate through the folder structure, we need to add the ability to

download the files. Unfortunately, this isn't as simple as accessing a link attribute on the
file. To get the download link, we have to query the Dropbox API for each file.

We will query the API on the creation of the file component, this will asynchronously get
the download link and show it once available. Before we can do this, we need to make the

Dropbox instance available to the file component.

Add a new attribute to the file component in the view, and pass the Dropbox method
through as the value:

<file :d="dropbox()" :f="entry"></file>

Add the d variable to the props object of your component accepting an Object:

props: {

f: Object,

d: Object

},

We are now going to add a data attribute of link. This should be set to false by default,

so we can hide the link, and we'll populate it with the download link once the API has

returned with the value.

Add the created() function to the file component, and inside add the API call:

created() {

this.d.filesGetTemporaryLink({path:

this.f.path_lower}).then(data => {

this.link = data.link;

});

}