vue.js - 将v-for循环与Vue结合使用时，如何仅显示重复值的一次迭代？

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')，但是我注意到它渲染了两次，因为它在数组中显示了两次。有没有办法让我只显示一次(source:'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);
  }
}