在 Vue.js 中显示数组中列表的全部内容

Question

我希望在模块导出中使用的数组中显示列表的全部内容 - 列出 event 的所有 participants。 我有另一个组件处理所有事件的呈现，所以在这个组件中我只需要显示一个事件的数据。

我的数据：

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"]
    }   
]   

处理events 渲染的部分代码。

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

目前这会导致为每个事件显示空的项目符号列表，但项目符号数量正确。 上面代码的输出：

Event 1
Participants:
-
-
-

Event 2
Participants:
-
-

Event 3
Participants:
-
-
-

Answer 1

li 中的participant 指的是参与者的姓名，而不是参与者列表的索引。

在你的 li 正文中写 participant 而不是 event.participants[participant]