Vue中如何匹配两个数组的城市名以获取对应delivery_time字段值

解决方法 #

核心修正点 #

你原来的includes比对逻辑存在缺陷：includes对对象类型是做引用相等判断，两个数组里的城市对象是不同引用，你之前的匹配成功属于偶发情况，正确逻辑应该按name字段匹配。

最简实现代码 #

1. 定义匹配方法

methods: {
  getDeliveryTime(city) {
    const matchItem = this.deliveryTime.find(item => item.name === city.name)
    return matchItem ? matchItem.delivery_time : '暂无配送时间'
  }
}

2. 调整模板逻辑

建议遍历城市列表region渲染，而非遍历配送时间数组：

<div v-for='(reg, index) in region' :key='index' > 
  <span v-if="reg.name" :class='{ "reg": getDeliveryTime(reg) !== "暂无配送时间" }'>
    {{ reg.name }} 配送时间：{{ getDeliveryTime(reg) }}
  </span>
</div>

性能优化方案（可选，适合数据量较大的场景） #

把配送时间数组提前转成Map结构缓存，避免每次渲染都遍历数组查找：

computed: {
  deliveryMap() {
    // 键为城市名，值为配送时间，一次转换多次复用
    return new Map(this.deliveryTime.map(item => [item.name, item.delivery_time]))
  }
}

模板直接调用即可：

<div v-for='(reg, index) in region' :key='index' > 
  <span v-if="reg.name" :class='{ "reg": deliveryMap.has(reg.name) }'>
    {{ reg.name }} 配送时间：{{ deliveryMap.get(reg.name) || '暂无配送时间' }}
  </span>
</div>

内容的提问来源于stack exchange，提问作者Alex