Question

Vue的新手，我想遍历每个类别，然后显示帖子。

<section v-for="(category) in (categoryList)">
    <h2>{{category.title}}</h2>
    <div v-for="(post) in (sortedActivity, filteredList)">
        {{post.title}}
    </div>
 </section>

类似上面的事情。

sortedActivity函数是一个简单的排序，而filteredList函数是一个搜索。

但是如何将{{category.title}}解析为计算范围内的那些函数？我假设我想使用类别标题更新当前实例状态？但是不确定在循环内执行此操作的最简单方法，因为它会更改。还是还有其他方法（不是文字方法）？

谢谢

Answer 1

我假设您希望首先使用filteredList搜索类别，然后使用sortedActivity进行排序。在这种情况下，您可以使用：

<section v-for="category in categoryList">
  <h2>{{ category.title }}</h2>
  <div v-for="post in sortedActivity(filteredList(category.title))">
    {{ post.title }}
  </div>
</section>

但是，通常，您应该创建另一个如下所示的子组件：

<category-posts :category="category" v-for="category in categoryList">
</category-posts>

每个category-posts所在的位置：

<section>
  <h2>{{ category.title }}</h2>
  <div v-for="post in sortedActivity(filteredList(category.title))">
      {{ post.title }}
  </div>
</section>

这将帮助您将外部循环和内部循环分开，并避免重新计算内部for循环。另外，请不要忘记使用key attribute。

在Vue中过滤嵌套循环

1 个答案: