Vue/Javascript：如何正确访问以日期为键的对象属性？

首先明确：日期完全可以作为对象的键名，你的问题出在属性的调用方式上。

在Vue模板里，当你写item.date.name时，Vue会把date当成一个固定的属性名去查找，但实际上date是你循环里的变量（来自date_range数组的每一项），这时候必须用方括号语法来访问动态属性。

错误原因解析 #

你的原代码片段：

<td>{{item.date.name}}</td>

这里的date被解析成了对象的字面量属性，相当于你在找item['date']，而不是item['2020-04-01']这种动态的日期键，自然拿不到对应的值，也不会报错——因为item.date是undefined，访问undefined.name在Vue模板里会被静默处理。

修改后的代码 #

把点语法改成方括号语法即可：

<tbody>
  <tr v-for="item in body_data">
    <template v-for="date in date_range">
      <td>{{item.id}}</td>
      <!-- 用方括号访问动态属性，加可选链避免报错 -->
      <td>{{item[date]?.name}}</td>
    </template>
  </tr>
</tbody>

这里的?.是可选链操作符，作用是当item[date]不存在时，不会触发报错，而是返回undefined，让页面渲染更稳健。

额外注意事项 #

• 确保date_range里的日期字符串，和body_data中对象的日期键完全一致（包括格式、连字符/斜杠、大小写，比如2020-04-01和2020/04/01是完全不同的键）
• 如果需要处理不存在的日期键，可以添加默认值，比如：

  <td>{{item[date]?.name || '无数据'}}</td>
  

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