VueJS中使用循环索引无法访问JSON属性的问题求助

问题背景 #

开发VueJS应用展示Strava的20周活动数据，已获取API返回的对象，但无法访问其total_distance和total_moving_time属性。相关代码片段如下：

【DATA】 #

weekly_total_data会随周数增加而更新

data() {
  return {
    activity_weeks: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
    weekly_total_data: [
      {"week_number":3,"total_distance":39877.6,"total_moving_time":11841},
      {"week_number":2,"total_distance":58596.4,"total_moving_time":18719},     
      {"week_number":1,"total_distance":41347.5,"total_moving_time":12796}
    ]
  }
}

【FUNCTION】 #

数据访问函数

matchWeeklyTotals(){
  var x = this.weekly_total_data
  console.log(x)
  return x
}

【TEMPLATE】 #

遍历周数展示对应数据

<div v-for="(week, week_index) in this.activity_weeks" v-bind:value="week._id">
   <div class="container max-w-xl mx-auto">
       <h2 class="text-2xl">Week {{week}}: {{ (matchWeeklyTotals()[week_index])}}</h2>
   </div>
</div>

当前能显示整个对象，但用matchWeeklyTotals()[week_index][total_distance]这类写法访问属性失败，尝试过JSON.parse也无效。

解决方案 #

1. 修正属性访问语法 #

访问对象属性时，字符串类型的属性名必须加引号，或使用点语法：

• 错误写法：matchWeeklyTotals()[week_index][total_distance]
• 正确写法（二选一）：

  // 点语法
  matchWeeklyTotals()[week_index].total_distance
  // 方括号语法（属性名加引号）
  matchWeeklyTotals()[week_index]['total_distance']
  

2. 修复周数与数据的匹配逻辑 #

weekly_total_data中的周数并非按顺序排列，直接用索引匹配会导致数据错位。修改matchWeeklyTotals函数，根据周数精准匹配对应数据：

matchWeeklyTotals(weekNumber) {
  // 找到对应周数的数据对象，无数据时返回空对象避免报错
  return this.weekly_total_data.find(item => item.week_number === weekNumber) || {}
}

3. 更新模板代码 #

遍历activity_weeks时，直接传入当前周数给匹配函数，安全访问属性：

<div v-for="week in activity_weeks" :key="week">
   <div class="container max-w-xl mx-auto">
       <h2 class="text-2xl">Week {{week}}: 
         {{ matchWeeklyTotals(week).total_distance || 0 }} meters, 
         {{ matchWeeklyTotals(week).total_moving_time || 0 }} seconds
       </h2>
   </div>
</div>

4. 可选优化：预处理数据提升效率 #

若weekly_total_data频繁更新，可将其转为以周数为键的对象，减少重复查找：

// 例如在API请求成功后执行
this.weekly_total_map = this.weekly_total_data.reduce((map, item) => {
  map[item.week_number] = item
  return map
}, {})

模板中直接访问：

<div v-for="week in activity_weeks" :key="week">
   <div class="container max-w-xl mx-auto">
       <h2 class="text-2xl">Week {{week}}: 
         {{ weekly_total_map[week]?.total_distance || 0 }} meters, 
         {{ weekly_total_map[week]?.total_moving_time || 0 }} seconds
       </h2>
   </div>
</div>

内容的提问来源于stack exchange，提问作者Steven Diffey