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

Answer 2

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

您可以这样做：

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

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

2 个答案: