在另一个数组vue上筛选或查找
在另一个数组vue上筛选或查找
提问于 2021-09-08 14:11:44
有两个数组，我从后端接收数据。在城市的第一个数组中，在第二个数组中，交付时间。
首先：
region: {
type: Array,
default: () => []
},第二：
deliveryTime: {
type: Array,
default: () => []
}作为一个常规的数组，key-value。(例如-- Region: [{"name": "Boston"}, {"name":"Detroit"}, {""}];和DeliveryTime：[{"name": "Detroit","delivery_time: "2-7""},{"name": "Boston","delivery_time": "1-3"},{"}])如果名称相同，则需要输出交付时间。
我试过了：
<div v-for='(reg, index) in deliveryTime' :key='index' >
<span :class='{ "reg": findTime(reg) }'> {{ reg }} </span>
</div>
///////////////
findTime(reg) {
return this.region.includes(reg);
}查找匹配的城市，但如何引用delivery_time
回答 1
Stack Overflow用户
发布于 2021-09-08 21:22:19
两个数组元素都在name属性中包含区域名称，因此findTime()需要从this.region[]和reg (即deliveryTime[]数组元素)中读取该属性。
使用Array.prototype.some()将每个地区的name与交付时间的地区进行比较：
export default {
methods: {
findTime(reg) {
return this.region.some(r => r.name === reg.name)
}
}
}然后，要有条件地显示项目，请在模板中使用v-if：
<span v-if="findTime(reg)">{{ reg.name }}</span>另一种解决问题的方法是计算过滤后的结果：
<template>
<div v-for='(reg, index) in computedDeliveryTime'>
<span> {{ reg.name }} </span>
</div>
</template>
<script>
export default {
computed: {
computedDeliveryTime() {
return this.deliveryTime.filter(d => {
return this.region.some(r => r.name === d.name)
})
}
}
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69104707
复制相关文章
相似问题
腾讯云开发者
