Vue中嵌套v-for如何关联Rooms数组与roomUserCount读取对应user_count

核心逻辑 #

外层已经遍历拿到当前room.id，直接拼接roomUserCount.channels对应的键名取值即可，无需额外嵌套v-for遍历channels（避免不必要的性能消耗）。

最简实现（推荐） #

直接在模板内取值，兼容Vue3：

<div v-for="room in rooms" :key="room.id">
  <!-- 其他房间信息渲染 -->
  在线人数：{{ roomUserCount.channels[`presence-chat.${room.id}`]?.user_count ?? 0 }}
</div>

如果是Vue2环境，不支持可选链和空值合并运算符，写法如下：

<div v-for="room in rooms" :key="room.id">
  <!-- 其他房间信息渲染 -->
  <div v-if="roomUserCount.channels['presence-chat.' + room.id]">
    {{ roomUserCount.channels['presence-chat.' + room.id].user_count }}
  </div>
  <div v-else>
    0
  </div>
</div>

按提供的嵌套代码框架补全 #

给出的嵌套框架内层v-for属于冗余属性，可以直接删除后补全如下：

<div>
  <div v-if="roomUserCount.channels['presence-chat.' + room.id]">
    {{ roomUserCount.channels['presence-chat.' + room.id].user_count }}
  </div>
  <div v-else>
    0
  </div>
</div>

如果一定要保留内层v-for属性（仅为适配原有框架结构，不推荐），可以遍历当前room对应的单个匹配项：

<div v-for="countInfo in [roomUserCount.channels[`presence-chat.${room.id}`]]" :key="room.id">
  <div v-if="countInfo">
    {{ countInfo.user_count }}
  </div>
  <div v-else>
    0
  </div>
</div>

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