Getting a List of Files Using the Dropbox API Chapter 4We now need to only show the loading div if the app is loading and the list once the data
has loaded. As this is just one change to the DOM, we can use the v-if directive. To give
you the freedom of rearranging the HTML, add the attribute to both instead of using v-
else.
To show or hide, we just need to check the status of the isLoading variable. We can
prepend an exclamation mark to the list to only show if the app is not loading:
<div>
<h1>Dropbox</h1>
<div v-if="isLoading">Loading...</div>
<ul v-if="!isLoading">
<li v-for="entry in structure">
<strong>{{ entry.name }}</strong>
<span v-if="entry.size">- {{
bytesToSize(entry.size) }}</span>
</li>
</ul>
</div>Our app should now show the loading container once mounted, and then it should show
the list once the app data has been gathered. To recap, our complete component code now
looks like this:
Vue.component('dropbox-viewer', {
template: '#dropbox-viewer-template',
data() {
return {
accessToken: 'XXXX',
structure: [],
byteSizes: ['Bytes', 'KB', 'MB', 'GB', 'TB'],
isLoading: true
}
},
methods: {
dropbox() {
return new Dropbox({
accessToken: this.accessToken
});
},
getFolderStructure(path) {
this.dropbox().filesListFolder({
path: path,
include_media_info: true
})
.then(response => {