Display entire content of a List within an Array in Vue.js

Question

I wish to display entire content of a list within array I am using within the export of the module - list all participants of an event. I have another component that handles rendering of all events, so in this one I would just need to show data for one event.

My data:

events [
    {
        "id":1,
        "participants": ["John Smith",  "Victoria Abraham", "Anthony Manning"]
    },
    {
        "id":2,
        "participants": ["Victoria Abraham",  "Lily Knox"]
    },
    {
        "id":3,
        "participants": ["Lily Knox",  "Anthony Manning", "Joan Scott"]
    }   
]

Part of code that handles rendering of events.

<template v-for="event in events">
       Participants:
        <li v-for="participant in event.participants" :key="participant">{{ event.participants[participant] }}</li>
</template>

Currently this results in displaying empty bullet list for each event, but with correct number of bullets. Output of code above:

Event 1
Participants:
-
-
-

Event 2
Participants:
-
-

Event 3
Participants:
-
-
-

Dirk V · Accepted Answer · 2020-08-31 23:16:48Z

2

The participant in your li refers to the name of the participant and not the index of the participants list.

write participant instead of event.participants[participant] in your li body

answered Aug 31, 2020 at 23:16

Dirk V

1,4991 gold badge13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Display entire content of a List within an Array in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related