如何在Vue.js中从内部数组隐藏重复项

问题描述

我正在尝试从vuejs中的嵌套数组中删除重复的键，并将其从DOM中删除

<div class="container" v-for="shops in malls">
  <div class="container" v-for="shop in shops.section">
  <div class="detail-report-item" v-for="detail in shop.shop" :key="detail.id" :id="detail.id">
    <span> {{ detail.name }} </span>
    <span> {{ detail.date }} </span>
</div>
</div>
</div>

我的数据是通过axios从Laravel API获取的。 附言：这可能有点难以理解

[
  {
    id: 2,first_name: "john",last_name: "john",malls: [
      {
        id: 1,name: "Ginger mall",slug: "Ginger-mall",pivot: {
          user_id: 2,mall_id: 1,id: 1
        },shop: [
          {
            id: 1,title: "Report 1"
          }
        ]
      }
    ]
  }
];

  

     

解决方法

您可以使用一种方法（源：https://stackoverflow.com/a/56757215/11484454）从数组中删除所有重复的键（在这种情况下，我们假设具有相同ID的条目是重复的）：

transloco

然后在您的html模板中使用它：

{
    methods: {
         filteredList(array) {
              return array.filter((v,i,a) => a.findIndex(t => (t.id === v.id)) === i)
         }
    }
 }

,

我想知道您的数据字段是什么？
您可以通过计算键来计算具有重复ID的新数组，以提高性能。
您可以参考此示例。

<template>
    <section class="second-section">
        <div class="row">
            <p>Numbers:</p>
            <li v-for="n in numbers" :key="n.id"> {{ n }}</li>
            <p>Even Numbers:</p>
            <li v-for="n in evenNumbers" :key="n.id">{{ n }}</li>
            <p>Odd Numbers:</p>
            <li v-for="n in oddNumbers" :key="n.id">{{ n }}</li>
        </div>
    </section>
</template>

<script>
export default {
    name: 'second-section',data () {
        return {
            numbers: [1,2,3,4,5,6,7,8,9,10]
        }
    },computed: {
        evenNumbers: function () {
            return this.numbers.filter(function (number) {
                return number % 2 === 0
            })
        },oddNumbers: function () {
            return this.numbers.filter(function (number) {
                return number % 2 === 1
            })
        }
    }
}
</script>