Activity 3: Get All Famous Works
1. Understanding the Goal
构建一个包含所有作者名作标题的响应式列表。我们将遍历每位作者的 famousWorks,使用 flatMap 将结果拍平成一维数组,并用 Vue 的 computed 包装以保持响应性。
2. Step-by-Step Instruction
- Step 1: Use the
flatMapmethod to map each author to their famous works. - Step 2: Use the
mapmethod insideflatMapto get the title of each work. - Step 3: Use the
computedfunction from Vue.js to create a reactive value.
3. Code Explanation
| 部分 | 含义 |
|---|---|
computed(...) | Vue.js 中的 计算属性,其值会随着依赖的 authors 变化而自动更新。 |
authors.flatMap(...) | 对 authors 数组进行“映射并扁平化处理”,将每位作者的所有作品标题拼接成一个一维数组。 |
author.famousWorks.map(...) | 遍历每个作者的 famousWorks 数组,提取其中每个作品的 title 字段。 |
work.title | 每部作品的标题字符串。 |