Getting a List of Files Using the Dropbox API Chapter 4});
},
getFolderStructure(path) {
this.dropbox().filesListFolder({path: path})
.then(response => {
console.log(response.entries);
this.structure = response.entries;
})
.catch(error => {
console.log(error);
});
}
},
created() {
this.getFolderStructure('');
}
});We can now update our view to display the folders and files from your Dropbox. As the
structure array is available in our view, create a
- with a repeatable
- looping
through the structure.
As we are now adding a second element, Vue requires templates to have one containing the
element, wrap your heading and list in a
:
<script type="text/x-template" id="dropbox-viewer-
template">
<div>
<h1>Dropbox</h1>
<ul>
<li v-for="entry in structure">
</li>
</ul>
</div>
</script>
Viewing the app in the browser will show a number of empty bullet points when the array
appears in the JavaScript console. To work out what fields and properties you can display,
expand the array in the JavaScript console and then further for each object. You should
notice that each object has a collection of similar properties and a few that vary between
folders and files.