[Vuejs]-Filter nested loop in Vue

by

0👍

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.

Leave a comment