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

Navigating through the File Tree and Loading Folders from the URL Chapter 5

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

}

}

});

Once again, we can use f for the prop name to reduce repetition (and the file size of our

app). Update the view once again to use this new component:

<template v-for="entry in structure.files">

<file :f="entry"></file>

</template>

Linking folders and updating the structure

Now that we have our folders and files separated, we can transform our folder names into

links. These links will then update the structure to show the contents of the selected folder.

For this, we are going to use the path_lower property in each folder to build the link

target.

Create a dynamic link to each folder name, linking to the folder's path_lower. As we are

getting more familiar with Vue, the v-bind property has been shortened to just the colon

notation:

Vue.component('folder', {

template: '<li><strong><a :href="f.path_lower">{{

f.name }}</a></strong></li>',

props: {

f: Object

},

});