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

Getting a List of Files Using the Dropbox API Chapter 4

structure: [],

byteSizes: ['Bytes', 'KB', 'MB', 'GB', 'TB']

}

}

This is what will get appended to the figure, so feel free to make these properties either

lowercase or full words, for example, megabyte.

Next, add a new method, bytesToSize, to your component. This will take one parameter

of bytes and output a formatted string with the unit at the end:

bytesToSize(bytes) {

// Set a default

let output = '0 Byte';

// If the bytes are bigger than 0

if (bytes > 0) {

// Divide by 1024 and make an int

let i = parseInt(Math.floor(Math.log(bytes) /

Math.log(1024)));

// Round to 2 decimal places and select the

appropriate unit from the array

output = Math.round(bytes / Math.pow(1024, i),

2) + ' ' + this.byteSizes[i];

}

return output

}

We can now utilize this method in our view:

<li v-for="entry in structure">

<strong>{{ entry.name }}</strong>

<span v-if="entry.size"> - {{

bytesToSize(entry.size) }}</span>

</li>

Adding a loading screen

The last step of this chapter is to make a loading screen for our app. This will tell the user
the app is loading, should the Dropbox API be running slowly (or you have a lot of data to

show!).