Vue.js中如何遍历responseObject的data数组获取指定字段？

你的问题出在v-for的遍历对象搞错了：当前你遍历的是整个responseObject对象，而不是它内部存储服务列表的data数组，所以拿不到service_name这类字段。

具体修正步骤： #

1. 修正v-for的遍历源
   把模板里的遍历目标从responseObject改成responseObject.data，因为真正的服务数组存在responseObject.data里。但要注意异步请求的初始状态问题——页面加载时请求还没完成，responseObject是空对象，直接访问data会报错，所以可以用可选链运算符处理：

   <ul>
     <li v-for="service in responseObject?.data" :key="service.service_id">
       服务名称：{{ service.service_name }}，类型：{{ service.service_type }}
     </li>
   </ul>
   

2. 或者提前初始化默认值
   在组件的data里给responseObject预设data为空数组，避免初始状态的报错：

   data() {
     return {
       responseObject: {
         data: []
       }
     };
   }
   

   这时候模板里可以直接写：

   <ul>
     <li v-for="service in responseObject.data" :key="service.service_id">
       服务名称：{{ service.service_name }}，类型：{{ service.service_type }}
     </li>
   </ul>
   

为什么之前的写法不行？ #

原来的v-for="service in responseObject"会遍历responseObject的所有可枚举属性（也就是resource、status、data这三个），每个service对应的是这些属性的值：第一个是字符串"services"，第二个是字符串"success"，第三个才是服务数组。前两个都是字符串，自然没有service_name属性，所以你拿不到结果。

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