时间戳

首页 > 解决方案 > 如何使用 VueJS 在循环中访问嵌套对象中的属性

javascript - 如何使用 VueJS 在循环中访问嵌套对象中的属性

问题描述

尝试使用项目中的循环访问嵌套对象中的属性时，我目前遇到错误vuejs。令人惊讶的是，其他类似的嵌套对象可以有效地工作，但只有一个。

<template>
   <div>

      <tr v-for="travel in travels" :key="travel.data.travel_request_id">
          <td> <router-link :to="'/expense/'+ travel.data.request_no +'/travel' "> {{ travel.data.request_no }} </router-link> </td>

          <td> {{ travel.data.summary.purpose}} </td>

          <td> {{ travel.data.user.surname }} {{ travel.data.user.first_name }} </td>
          <td> {{ travel.data.added_by.surname}} {{ travel.data.added_by.first_name }} </td>
          <td> {{ travel.data.created_at }} </td>
          <td> {{ travel.data.status }} </td>
      </tr>   

   </div>
</template>

travel.data.summary.purpose即使它存在于 travels 对象中，也会引发错误。

{{ travel.data.summary }}返回一个包含目的属性的对象，但我无法访问它。显示的错误是

[Vue warn]: Error in render: "TypeError: Cannot read property 'purpose' of null"

请参阅此链接以供参考

标签： javascriptvue.js

解决方案

在某些项目中，该字段summary为空，因此您应该在呈现嵌套字段之前检查其值purpose：

  <td v-if="travel.data.summary"> {{ travel.data.summary.purpose}} </td>

推荐阅读