Navigating through the File Tree and Loading Folders from the URL Chapter 5We now have our breadcrumb output array that we can loop through in the view.
The reason we add the slash after we've appended to the output array is
that the API states that to get the root of the Dropbox we pass in an empty
string, whereas all other paths must begin with a /.The next step is to output the breadcrumb into our view. As this template is small, we are
going to use the multiline JavaScript notation. Loop through the items within the folders
computed variable, outputting a link for each of the items. Don't forget to keep a containing
element around all the links:
template: '<div>' +
'<span v-for="f in folders">' +
'<a :href="f.path">{{ f.name }}</a>' +
'</span>' +
'</div>'Rendering this app in the browser should reveal a breadcrumb - albeit a bit squished
together and missing a home link (as the first item didn't have a name). Head back to the
folders function and add an if statement - checking whether the item has a name and, if
it doesn't, adding a hard-coded value:
folders() {
let output = [],
slug = '',
parts = this.p.split('/');
console.log(parts);
for (let item of parts) {
slug += item;
output.push({'name': item || 'home', 'path':
slug});
slug += '/';
}
return output;
}The other option is to add the if statement in the template itself:
template: '<div>' +
'<span v-for="f in folders">' +
'<a :href="f.path">{{ f.name || 'Home' }}</a>' +
'</span>' +
'</div>'