Filter nested loop in Vue - vue.js

Question

New to Vue, and I want to loop through each category and then display posts.
<section v-for="(category) in (categoryList)">
<h2>{{category.title}}</h2>
<div v-for="(post) in (sortedActivity, filteredList)">
{{post.title}}
</div>
</section>
Something like the above.
The sortedActivity function is a simple sort and filteredList function is a search.
But how do I parse {{category.title}} to those functions within computed? I assume I want to update the current instance state with the category title? But not sure the easiest way to do that within the loop as it will change. Or if there is another method (not literal)?
Thanks

Answer 1

I assume you wish to first search for a category using filteredList and then sort using sortedActivity. In that case, you can use:
<section v-for="category in categoryList">
<h2>{{ category.title }}</h2>
<div v-for="post in sortedActivity(filteredList(category.title))">
{{ post.title }}
</div>
</section>
However, in general, you should create another sub-component like the following:
<category-posts :category="category" v-for="category in categoryList">
</category-posts>
Where each category-posts would be:
<section>
<h2>{{ category.title }}</h2>
<div v-for="post in sortedActivity(filteredList(category.title))">
{{ post.title }}
</div>
</section>
This would help you keep outer and inner loop separate and avoid recomputation of inner for-loop. Also, do not forget to use key attribute.