vue 数据格式问题

李白的天不白2026-05-03 8:27

看这数据结构，报错的原因已经很明显了：父组件传递的数据结构和子组件期望的结构不匹配。

你截图中的 props 定义 list: Array 是正确的，但你在父组件（调用 DataList 的地方）传递数据时，很可能直接把整个 API 响应对象（包含 data 和 rows 的那个大对象）传给了它。

核心问题

子组件期望 ：一个纯粹的数组，例如 [{...}, {...}]。
父组件传递 ：一个包含数组的对象，例如 { data: { rows: [...] } }。

当 DataList.vue 尝试用 v-for="item in list" 渲染时，因为传进来的是一个对象而不是数组，就会报错或无法显示。

解决方案

你需要找到使用 <DataList /> 的那个父组件文件，修改绑定的属性。

错误写法（推测你现在的写法）

复制代码

<!-- 假设 apiResponse 是你截图中的那个完整对象 -->
<DataList :list="apiResponse" />

正确写法

你需要把数据"解构"一下，指向具体的数组位置（也就是截图中的 rows）。

情况 A：如果你的数据在 res.data.rows 中 （这是最常见的后端返回格式）

复制代码

<!-- 假设你的数据变量叫 apiResponse -->
<DataList :list="apiResponse.data.rows" />

情况 B：如果你的数据直接就在 rows 变量中

复制代码

<DataList :list="rows" />

如何修改代码

找到调用 DataList 的父组件（可能是 MessageArea.vue 或者 BlogComment.vue）。
找到 <DataList ... /> 标签。
修改 :list 绑定的值，确保它指向的是那个 Array $10$ ，而不是外面的 Object。

示例修改（在父组件中）：

复制代码

// 父组件 script
data() {
  return {
    fullResponse: {
        data: {
            rows: [/* ...你的数据... */]
        }
    }
  }
}

<!-- 父组件 template -->
<!-- 修改前 (错误) -->
<!-- <DataList :list="fullResponse" /> -->

<!-- 修改后 (正确) -->
<DataList :list="fullResponse.data.rows" />

修改后，DataList 接收到的 list 就是一个真正的数组，v-for 就能正常渲染了。

javascript 复制代码

  props: {
    list: {
      type: Array,
      default: () => []
    }
  },