Activity 8: Render a list of all famous works
1. Understanding the Goal
使用 Vue 的 v-for 遍历响应式数组 allFamousWorks,将所有名作标题渲染为列表。
2. Step-by-Step Instruction
- Step 1: Create a computed property
allFamousWorksthat flattens all authors’famousWorksinto one array. - Step 2: Normalize each item to a string title (in case your JSON stores works as objects with a
titlefield). - Step 3: In the template, iterate over
allFamousWorkswithv-forand display each work. - Step 4: Bind a unique key for each list item.
3. Code Explanation
| 部分 | 说明 |
|---|---|
v-for="(title, idx) in allFamousWorks" | 使用 v-for 遍历 allFamousWorks,逐项得到作品标题 title 与索引 idx。 |
:key="title + '-' + idx" | 为每行提供唯一 key(由标题与索引组成的复合键),保证渲染稳定。 |
{{ title }} | 插值语法:显示作品标题字符串。 |
allFamousWorks | 来自计算属性(Activity 3):聚合并拍平所有作者的名作标题形成的一维数组。 |