时间戳

首页 > 解决方案 > 如何在Vuejs中隐藏内部数组中的重复项

javascript - 如何在Vuejs中隐藏内部数组中的重复项

问题描述

我正在尝试从嵌套数组中删除重复键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 获取的。PS这可能有点难以阅读

[
  {
    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,
            mall_id: 1,
            title: "Report 1"
          }
        ]
      }
    ]
  }
];

标签： javascriptnode.jsvue.jsv-for

解决方案

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

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

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

  <div class="detail-report-item" v-for="detail in filteredList(shop.shop)" :key="detail.id" :id="detail.id">

推荐阅读