v-for nested inside another v-for AND an array issue

Question

OK so this is what I am working with. I have 2 arrays The first array contains an ID number. That ID matches up to the second array minus the presence-chat. string.

Array 1:

Rooms: Array
 0: Object
 id: 1
 1: Object
 id: 2
 2: Object
 id: 3

Array 2:

roomUserCount: Object
 channels: Object
 presence-chat.1: Object
 user_count: 2
 presence-chat.2: Object
 user_count: 3
 presence-chat.3: Object
 user_count: 4

What I am trying to figure out is how would I write my v-for command to run through the whole thing. Whats happening before is another v-for that is saying

v-for="room in rooms" :key="room.id"

Now for the next step nested inside the first v-for I need to run another one to fill in the appropriate data.

the nested code would look like this but I need to fill it in.

<div v-for="" :key="">
 <div v-if="">
 {{ user_count }}
 </div>
 <div v-else="">
 0
 </div>
</div>

What do I do?

Answer 1

That's actually one array (rooms) that indexes an object (roomUserCount).

Lookup the object by room.id in roomUserCount.channels. If the object exists, render its user_count:

<template>
 <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>
</template>

demo 1

Alternatively, you could simplify the template with optional chaining (?.) and nullish coalescing (??):

<template>
 <div v-for="room in rooms" :key="room.id">
 {{ roomUserCount.channels['presence-chat.' + room.id]?.user_count ?? 0 }}
 </div>
</template>

demo 2