Vue3 Composition API结合Laravel API填充表格失败求助

1. 先处理Proxy格式数据 #

Composable返回的Proxy数组，可在主组件中先转换为普通对象数组再赋值：

registerData.value = JSON.parse(JSON.stringify(await useRegisters().getRegisters()))

验证转换后表格是否能渲染，以此排查是否是Proxy包装导致的读取问题。

2. 检查Props定义与传递逻辑 #

表格组件的Props需确保类型正确且处理空值场景：

// 表格组件Props定义
defineProps({
  tableData: {
    type: Array,
    required: true,
    default: () => [] // 用工厂函数返回空数组，避免引用共享问题
  }
})

主组件传递时增加条件渲染，避免传递空值：

<TableComponent v-if="registerData?.length" :table-data="registerData" />

3. 确保异步赋值触发响应式更新 #

主组件中异步获取数据后，需正确更新响应式变量：

• 用ref定义时直接替换value：

const registerData = ref([])
const fetchData = async () => {
  registerData.value = await useRegisters().getRegisters()
}

• 用reactive定义时，可通过数组方法替换或直接赋值：

const state = reactive({ registerData: [] })
const fetchData = async () => {
  const data = await useRegisters().getRegisters()
  state.registerData.splice(0, state.registerData.length, ...data)
  // 或直接赋值：state.registerData = data
}

4. 验证表格组件的v-for渲染 #

确保v-for绑定正确数组，且key使用唯一标识（避免用index）：

<template>
  <table>
    <tr v-for="item in tableData" :key="item.id">
      <td>{{ item.your_field_name }}</td> <!-- 确保属性名与API返回完全匹配 -->
    </tr>
  </table>
</template>

在表格组件中打印tableData，确认数据已接收且结构正确。

5. 核对API返回的数据结构 #

检查Laravel API返回的是纯数组还是分页结构（如{ data: [...], meta: {} }）。若为分页结构，需在Composable中提取数据字段：

// Composable中的getRegisters函数
const getRegisters = async () => {
  const res = await axios.get('/api/registers')
  // 若API返回包裹在data字段中，返回res.data.data
  return res.data.data || res.data
}

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