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

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?

CodePudding user response：

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