如何解决如何在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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。