We have a layout within our app for user applications to work events. We list those applications in a v-for loop. However, we really need to reference some additional data on that layout from our users collection. We can achieve this by filtering through our users collection, but it's way too slow.

Here's the code that works, but is so slow (with 20K users) that the site is unusable.

<span v-for="u in filteredInfo(props.row)">
                <span v-if="u && u.skills && u.skills.length > 0" style="display:inline;">
                  <v-popover>
                    <i class="fad fa-briefcase"></i>
                    <template slot="popover">
                    <span v-for="z in u.skills">{{z.title}} / </span>
                  </template>
                  </v-popover>
                </span>
              </span>
            </span>

Then:

filteredInfo(user) {
 return this.users.filter(member => {
    return member.id == user.userId
  })
}

If I understand what's happening correctly, each application in my v-for loop has to filter through 20K users to find and load the correct user data... in this case, listing their skills.

To speed up the performance of this layout, wouldn't it be more helpful to call the user data directly? Here's the code I'm trying to get to work, but it doesn't show the data in the v-for loop.

filteredInfo(user) {
 fb.usersCollection.doc(user.userId).get()
  .then(doc => {
    console.log(doc.data());
    return doc.data()
  })
}

Would my second method (above) speed up the page? If so, what do I need to do to get it working?

Thanks!