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

Posted 2023-02-22

【中文标题】将 Vue for 循环的结果限制为仅当前使用的结果

【英文标题】：Limiting results from Vue for-loop to only the currently used one

【发布时间】：2020-12-15 15:36:53

【问题描述】：

我正在使用 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" 时，我得到了错误：

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

【参考方案1】：

我猜你应该看看conditional rendering

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

这不会渲染空数组：

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

【讨论】：

好的，所以这适用于第一个选择（我真的很兴奋哈哈）但是一旦我尝试点击另一个帖子，它会显示两个数组。我只希望它显示当前单击的数组

我现在肯定会阅读条件渲染，谢谢！

好吧，所以我的假设是错误的：'D 尝试添加一个像 p.shouldShowUpvoted 这样的属性并将其添加到条件中，就像这样p.usersThatUpvoted.length > 0 && p.shouldShowUpvoted