Within my code, I have defined two arrays: users and projects. Each array contains unique numbers as IDs. A project can be owned by multiple users, so in the projects array, there is an array of user IDs named ownersId that corresponds to the id of users in the users array. Here’s a snippet of how it looks:
export const users = [{
id: 1,
givenName: 'Alexander',
surname: 'Kelly',
initials: 'AK'
}, {
id: 2,
givenName: 'Karen',
surname: 'Jones',
initials: 'KJ'
}, {
// more user details...
}];
export const projects = [{
id: 1,
name: 'Project 1',
ownersId: [
1,
2,
// more owner IDs...
]}, {
// more project details...
}]
My objective is to iterate over the project details successfully achieved using v-for. However, I am facing a challenge when attempting to display user names associated with the IDs listed in the ownersId field whilst looping through each project.
<template>
<div class="demo">
<div
v-for="project in projects"
v-bind:key="project.id"
>
<h4><strong>{{ project.name }}</strong></h4>
<div v-if="project.ownersId" >
Shared with {{ project.ownersId.length }} others
</div>
<div>
<!-- Nested loop to display user names based on ID -->
</div>
</div>
</div>
</template>
<script>
import { projects } from '../data/example';
import { users } from '../data/example';
export default {
name: "Demo",
data() {
return {
projects,
users,
}
}
}
</script>