Vue.js中如何从数组嵌套对象获取并显示service_id与service_name

问题根源 #

你当前的v-for循环目标是整个API响应对象responseObject，而非响应里存储服务列表的data数组，导致循环拿到的是对象的键（比如resource、status、data），自然无法通过service.data[0].service_name获取正确数据。

步骤1：修正模板循环 #

将v-for的遍历目标改为responseObject.data，这样每个service就对应数组里的单个服务对象，直接访问其属性即可：

<li v-for="service in responseObject.data" :key="service.service_id">
  服务ID: {{ service.service_id }}, 服务名称: {{ service.service_name }}
</li>

注意：添加:key属性是Vue循环的最佳实践，这里用唯一的service_id作为键值，避免渲染异常。

步骤2：避免初始化时的undefined报错 #

初始状态下responseObject是空对象，直接访问responseObject.data会得到undefined，可以在data初始化时给responseObject设置默认的空数组：

<script>
import axios from "axios";
export default {
  data() {
    return {
      status: false,
      responseObject: { data: [] } // 预设data为空数组，防止渲染报错
    };
  },
  async mounted() {
    try {
      let response = await axios.get("http://localhost:4000/api/blogs");
      this.responseObject = response.data;
    } catch (e) {
      console.log(e);
    }
  }
};
</script>

如果使用Vue 3，也可以直接在模板里用可选链操作符简化处理：

<li v-for="service in responseObject?.data" :key="service?.service_id">
  服务ID: {{ service?.service_id }}, 服务名称: {{ service?.service_name }}
</li>

额外提示 #

你的API请求地址是/api/blogs，但返回的是services相关数据，可能是接口地址写错了，需要确认接口路径是否正确。

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