The Composition API Masterclass is out!
Sign-up for the Vue.js Masterclass 2024 Edition.
In the previous lessons you probably thought that it wouldn’t be enough with just a way to group forums - and yes, you are right - we need categories as well. A category is a collection of forums. It is the very first node in our application structure, and it is of great organizational help!
Since we have seen how to implement this functionality, this is a great opportunity to build something on your own to practice what you’ve learned.
CategoryListItem
will need an array of category’s forums.
PageCategory
can use CategoryListItem
.
Instead of re-creating the forum list items you should use the ForumList
component in the CategoryListItem
.
ForumList
won’t be used outside of the Category
related components. So, ForumList
's template can render a list of forums without having a list title. (by now the list title is Forums
)
Example CategoryListItem
template:
<div class="forum-list">
<h2 class="list-title">
<router-link :to="{name: 'Category', params: {id: category['.key']}}">
{{ category.name }}
</router-link>
</h2>
<ForumList :forums="categoryForums"/>
</div>