Getting a List of Files Using the Dropbox API Chapter 4Create the created() function on your component and call the getFolderStructure
method, passing in an empty string for the path to get the root of your Dropbox:
Vue.component('dropbox-viewer', {
template: '#dropbox-viewer-template',
data() {
return {
accessToken: 'XXXX'
}
},
methods: {},
created() {
this.getFolderStructure('');
}
});Running the app now in your browser will output the folder list to your console, which
should give the same result as before.
We now need to display our list of files in the view. To do this, we are going to create an
empty array in our component and populate it with the result of our Dropbox query. This
has the advantage of giving Vue a variable to loop through in the view, even before it has
any content.
Displaying the Dropbox data
Create a new property in your data object titled structure, and assign this to an empty
array. In the response function of the folder retrieval, assign response.entries to
this.structure. Leave console.log as we will need to inspect the entries to work out
what to output in our template:
Vue.component('dropbox-viewer', {
template: '#dropbox-viewer-template',
data() {
return {
accessToken: 'XXXX',
structure: []
}
},
methods: {
dropbox() {
return new Dropbox({
accessToken: this.accessToken