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

Question

我正在尝试从 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 获取的。 P.S这可能有点难读

[
  {
    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"
          }
        ]
      }
    ]
  }
];

Answer 1

您可以使用一种方法（来源：）从数组中删除所有重复的键（在这种情况下，我们假设具有相同 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">

Answer 2

我想知道你的数据字段是什么？
您可以通过计算键计算具有重复 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>

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

How to hide Duplicates from inner array in Vuejs

javascript

node.js

vue.js

v-for