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

console.log(response.entries);

this.structure = response.entries;

this.isLoading = false;

})

.catch(error => {

console.log(error);

});

},

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

}

},

created() {

this.getFolderStructure('');

}

});

Animating between states

As a nice enhancement for the user, we can add some transitions between components and

states. Helpfully, Vue includes some built-in transition effects. Working with CSS, these

transitions allow you to add fades, swipes, and other CSS animations easily when DOM
elements are being inserted. More information about transitions can be found in the Vue

documentation.

The first step is to add the Vue custom HTML element. Wrap both your

loading and list with separate transition elements and give it an attribute of name and a

value of fade:

<script type="text/x-template" id="dropbox-viewer-

template">

<div>

<h1>Dropbox</h1>