在 Vue 中使用 v-for 循环，如何只显示重复值的一次迭代？答案

【问题标题】：Using the v-for loop with Vue, how can I show only one iteration of a repeating value?在 Vue 中使用 v-for 循环，如何只显示重复值的一次迭代？
【发布时间】：2020-04-04 19:36:38
【问题描述】：

我正在尝试使用 v-for 循环遍历对象数组，每个对象都包含一个键/值对。

Example: [{rel_date: '1 hour ago', source: 'slack'}, {rel_date: '2 hours ago', source: 'gmail'}, {rel_date: '3 hours ago', source: 'microsoft'}, {rel_date: '4 hours ago', source: 'slack'}]

在我的 vue 模板中，我使用 v-for 循环和循环内的 v-if 来检查 (source = 'slack')，但我注意到它渲染了两次，因为它在数组。有没有办法让我只显示一次（来源：'slack'）的迭代？

This is my template code

<div class="col-12 text-left" v-for="last_activity in team_member.activity">
            <span v-if="last_activity.source == 'slack'">
                <span class="label label-slack">[[ last_activity.source ]]</span>
            </span>
        </div>

【问题讨论】：

最好只使用计算属性来导出要显示的数据，而不是尝试处理模板中的所有逻辑。

标签： vue.js vuejs2

【解决方案1】：

需要修改v-for上的数组：

<div class="col-12 text-left" v-for="last_activity in [...new Set(team_member.activity.map(JSON.stringify))].map(JSON.parse)">
    <span v-if="last_activity.source == 'slack'">
        <span class="label label-slack">[[ last_activity.source ]]</span>
    </span>
</div>

顺便说一句，最好创建一个过滤数组的方法

<div class="col-12 text-left" v-for="last_activity in filterArray(last_activity.source)">
    <span v-if="last_activity.source == 'slack'">
        <span class="label label-slack">[[ last_activity.source ]]</span>
    </span>
</div>

关于你的方法：

methods:{
  filterArray(array){
    return [...new Set(array.map(JSON.stringify))].map(JSON.parse);
  }
}

【讨论】：

【解决方案2】：

如果循环不会有任何其他用途，并且唯一的目的是检查“slack”是否存在并显示一次，则不需要v-for。

你可以这样做：

<div v-if="team_member.activity.find(activity => activity.source === 'slack')">
    <span class="label label-slack">slack</span>
</div>

【讨论】：