Vue3组合式API调用Laravel API后表格无法渲染数据问题

核心问题拆解 #

1. 异步函数无返回值：你的getRegisters是异步函数，但只把数据赋值给内部的registers.value，没有返回结果，导致调用时拿到的是空Promise，.then自然拿不到有效数据。
2. 数据流方向搞反：子组件定义emits: ['registers']是用来向父组件发送事件的，而你需要的是父组件把数据传给子组件，应该用props而非emit。
3. Axios请求配置错误：请求头的写法不正确，content-type应该嵌套在headers对象里。

步骤1：修正Composable的getRegisters函数 #

让函数返回获取到的数据，同时修正请求头配置，增加参数校验避免报错：

const getRegisters = async (param_search) => {
    const keys = Object.values(param_search);
    // 校验参数结构，防止空值报错
    if (!keys.length || !keys[0].parameter || !keys[0].value) return [];
    
    const formData = new FormData();
    formData.append("parameter", keys[0].parameter);
    formData.append("value", keys[0].value);
    
    // 修正headers的正确写法
    const response = await axios.post('/api/listingApi/getRegister', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
    });
    
    registers.value = response.data.data;
    return response.data.data; // 必须返回数据，外部才能拿到结果
}

步骤2：修正父组件的数据传递逻辑 #

父组件中定义ref存储表格数据，等待异步请求完成后更新，再通过props传给子组件：

// 父组件组合式API代码
import { ref } from 'vue';
import { getRegisters } from './你的composable路径';

const param_search = ref(/* 你的参数对象 */);
const tableData = ref([]); // 专门存储表格渲染数据

const searchRegisters = async () => {
    // 等待异步请求完成，拿到返回数据
    const data = await getRegisters(toRef(param_search, 'param_search'));
    tableData.value = data;
}

父组件模板中通过props传递数据给子组件：

<template>
    <button @click="searchRegisters()">搜索</button>
    <!-- 用props把数据传给子组件 -->
    <nAsignedCalls :registers="tableData" />
</template>

步骤3：修正子组件的接收逻辑 #

子组件不需要定义emits，而是通过defineProps接收父组件传递的registers数据：

// 子组件组合式API代码
import { defineProps } from 'vue';

const props = defineProps({
    registers: {
        type: Array,
        default: () => [] // 初始化为空数组，避免v-for渲染报错
    }
});

子组件模板中正常遍历渲染表格：

<template>
    <table>
        <thead>
            <!-- 你的表头内容 -->
        </thead>
        <tbody>
            <tr v-for="item in registers" :key="item.id">
                <!-- 根据你的数据结构渲染单元格 -->
                <td>{{ item.yourFieldName }}</td>
            </tr>
        </tbody>
    </table>
</template>

额外注意事项 #

• 确保param_search的结构符合预期，Object.values(param_search)[0]确实包含parameter和value属性，避免FormData赋值出错。
• 如果Laravel API需要CSRF令牌，要确保Axios已配置自动携带令牌（通常在项目的bootstrap.js中配置axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');）。

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