Navigating through the File Tree and Loading Folders from the URL Chapter 5this.isLoading = false;
})
.catch(error => {
console.log(error);
});
},This code loops through the entries, as we were in the view and checks the .tag attribute.
As the attribute itself begins with a ., we are unable to use the object style notation to
access the property like we would, for example, do for the name - entry.name. We then
append the entry to either the files or folders array using JavaScript push, depending
on the type.
To display this new data, we need to update the view to loop through both types of array.
This is a perfect use case for using the tag as we want to append both arrays to
the same unordered list.
Update the view to list the two arrays separately. We can remove the size option from the
folder display section, as it will never feature a size property:
<ul v-if="!isLoading">
<template v-for="entry in structure.folders">
<li>
<strong>{{entry.name }}</strong>
</li>
</template>
<template v-for="entry in structure.files">
<li>
<strong>{{ entry.name }}</strong>
<span v-if="entry.size">- {{ bytesToSize(entry.size) }}</span>
</li>
</template>
</ul>This now gives us the opportunity to create components for both types.