使用带有Vue的v-for循环，如何只显示重复值的一次迭代

Question

我正在尝试使用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>

Answer 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);
}
}

Answer 2

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

你可以这样做：

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