将 Vue for 循环的结果限制为仅当前使用的结果

Question

我正在使用 for 循环获取我所有的 posts，然后使用部分获取该帖子的所有 usersThatUpvoted 的列表。

<div v-for="p in posts" style="padding: 16px">
    <div>
        <%- partial('../../partials/upvoter') %>
    </div>                
</div>

这是部分内容：

<div style="background-color: white;padding: 16px;
display: flex; flex-direction: column;">
    {{p.usersThatUpvoted}}
</div>

它几乎可以正常工作。所以，当我点击第一个帖子时，我得到usersThatUpvoted 和post：

当我点击第二个帖子时，我得到usersThatUpvoted 那个post：

我只是想消除其他未使用的数组。

这篇文章似乎专注于索引中的特定项目： How to put class="active" to first element in vuejs for loop

我希望它是动态的（不知道这是否是正确的术语）。此外，当我尝试使用 "active" 时，我得到了错误：

属性或方法“活动”未在实例上定义，但在渲染期间被引用。

Answer 1

我猜你应该看看conditional rendering

我假设当您选择某个帖子时，只有该帖子的支持者可用

这不会渲染空数组：

<div v-for="p in posts" style="padding: 16px">
    <div v-if="p.usersThatUpvoted.length > 0">
        <%- partial('../../partials/upvoter') %>
    </div>                
</div>