Question

在使用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"

请参阅This link供参考

Answer 1

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

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

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

1 个答案: