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

Posted 2023-02-23

【中文标题】在 Vue.js 中显示数组中列表的全部内容

【英文标题】：Display entire content of a List within an Array in Vue.js

【发布时间】：2020-12-20 01:23:50

【问题描述】：

我希望在模块导出中使用的数组中显示列表的全部内容 - 列出 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:
-
-
-

【参考方案1】：

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

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