Vue嵌套v-for场景下如何判断关联记录不存在并显示对应内容

嘿，我明白你遇到的问题了——现在的第三层v-for只有在对应位置存在物品关联的时候才会渲染内容，没有关联的话这部分DOM直接就不生成了，自然没法显示"No"。咱们换个思路，不用第三层循环，直接在第二层循环里判断当前位置是否包含当前物品的关联记录就行。

方法一：直接用Array.some()判断 #

你可以去掉第三层v-for，改用Array.some()方法来检查当前location的item_locations里有没有和当前item匹配的记录，然后根据结果显示"Yes"或"No"。代码修改如下：

<div v-for="item in items" :key="item.id">
  {{ item.name }}
  <div v-for="location in locations" :key="location.id">
    <!-- 直接判断当前位置是否有该物品的关联 -->
    <p>{{ location.item_locations.some(il => il.item_id === item.id) ? 'Yes' : 'No' }}</p>
  </div>
</div>

Array.some()会遍历数组，只要找到符合条件的元素就返回true，否则返回false，刚好符合我们的需求——有匹配就显示"Yes"，没有就显示"No"。

方法二：用计算属性优化（适合数据量大的场景） #

如果你的items和locations数据量比较大，每次循环都调用some()可能会有点性能开销，这时候可以提前用计算属性把每个位置对应的物品ID集合整理好：

<script>
export default {
  data() {
    return {
      items: [],
      locations: []
    }
  },
  computed: {
    locationItemMap() {
      // 生成一个对象，键是location.id，值是该location下所有item_id的数组
      return this.locations.reduce((map, location) => {
        map[location.id] = location.item_locations.map(il => il.item_id)
        return map
      }, {})
    }
  }
}
</script>

<template>
  <div v-for="item in items" :key="item.id">
    {{ item.name }}
    <div v-for="location in locations" :key="location.id">
      <p>{{ locationItemMap[location.id].includes(item.id) ? 'Yes' : 'No' }}</p>
    </div>
  </div>
</template>

这样计算属性只在数据变化时执行一次，后续循环里直接用includes()判断，性能会更好。

为什么原来的方法不行？ #

原来的第三层v-for="item_location in location.item_locations"只有当location.item_locations里有数据的时候才会渲染内部的<p>标签，如果某个位置没有对应物品的关联，这层循环根本不会执行，所以自然没法显示"No"。咱们把判断逻辑提到第二层循环，就能覆盖所有物品/位置的组合啦！

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