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

Loading...

</div>

</div>

</transition>

<transition name="fade">

<div v-if="!isLoading">

<breadcrumb :p="path"></breadcrumb>

<ul>

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

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

</template>

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

<file :d="dropbox()" :f="entry"></file>

</template>

</ul>

</div>

</transition>

</div>

</script>

The accompanying JavaScript app should look like this:

Vue.component('breadcrumb', {

template: '<div>' +

'<span v-for="(f, i) in folders">' +

'<a :href="f.path">{{ f.name || 'Home' }}</a>' +

'<i v-if="i !== (folders.length - 1)"> »

</i>' + '</span>' +

'</div>',

props: {

p: String

},

computed: {

folders() {

let output = [],

slug = '',

parts = this.p.split('/');

for (let item of parts) {

slug += item;

output.push({'name': item || 'home', 'path':

'#' + slug});

slug += '/';

}

return output;

}

}

});