如何在Inertia Vue.js + Jetstream项目中实现多条数据批量插入

核心问题 #

你目前的核心问题是提交的表单数据没有包含组装好的批量成员数组，同时存在多处逻辑错误导致数据组装、请求发送异常。

具体问题与修复步骤 #

1. 表单结构错误 #

你当前定义的form是单条数据结构，所有批量成员数据都存在record数组中，但提交时没有将record放入表单参数里。
修复：修改form定义，新增批量数据存储字段：

form: this.$inertia.form({
    tim_id: '',
    record: [] // 存储所有批量成员数据
})

2. 提交逻辑错误 #

提交方法没有把组装好的record数组放入提交参数，修复create方法：

create() {
    // 赋值选中的团队ID
    this.form.tim_id = this.temp_section_id
    // 把组装好的批量成员数据放入表单
    this.form.record = this.record
    this.form.post(route('timDetail.store'), {
        preserveScroll: true,
        preserveState: true,
        onSuccess: () => {
            this.closeModal();
            this.record = [] // 清空本地批量数据
            this.form.reset();
        },
    })
}

3. getAnggota方法逻辑错误 #

你错误使用Inertia.reload来请求选中团队的成员数据，reload仅用于重新加载当前页面的Props，不能用来发起自定义接口请求，同时数组拼接逻辑完全错误。
修复：改用独立接口请求团队成员数据：

async getAnggota() {
    // 替换为你实际的后端接口地址
    const response = await Inertia.get(`/tims/${this.temp_section_id}/anggota`, {}, {
        preserveState: true,
        preserveScroll: true
    })
    this.record = [];
    const data = response.props.data // Inertia请求返回的数据存在props字段中
    // 原循环条件<=会导致数组越界，改为<
    for (let index = 0; index < data.length; index++){
        this.addRow();
        // 直接在此处赋值tim_id，无需在模板中执行方法
        this.record[index].tim_id = this.temp_section_id
        if(data[index].tim_detail != null){
            this.record[index].nip = data[index].tim_detail.nip;
            this.record[index].posisi = data[index].tim_detail.posisi;
        }
    }
    this.banyakAnggota = data;
}

4. 模板逻辑错误 #

• 模板中直接写{{setTimId(index, tims.id)}}会导致每次渲染重复执行赋值逻辑，删除该行即可，我们已经在getAnggota中完成了tim_id赋值。
• 表单错误提示绑定错误，批量数据的错误字段格式为record.*.nip，修改错误提示绑定：

<!-- NIP错误提示 -->
<jet-input-error :message="form.errors['record.' + index + '.nip']" class="mt-2" />
<!-- 职位错误提示 -->
<jet-input-error :message="form.errors['record.' + index + '.posisi']" class="mt-2" />

5. 后端适配（Laravel端） #

修改timDetail.store对应的控制器方法，支持数组验证和批量插入：

public function store(Request $request)
{
    // 数组验证规则
    $validated = $request->validate([
        'tim_id' => 'required|exists:tims,id',
        'record' => 'required|array',
        'record.*.nip' => 'required|exists:karyawans,nip',
        'record.*.posisi' => 'required|string|max:255',
    ]);

    // 组装批量插入数据
    $insertData = collect($validated['record'])->map(function ($item) use ($validated) {
        return [
            'tim_id' => $validated['tim_id'],
            'nip' => $item['nip'],
            'posisi' => $item['posisi'],
            'created_at' => now(),
            'updated_at' => now(),
        ];
    })->toArray();

    // 批量插入
    \App\Models\TimDetail::insert($insertData);

    return redirect()->back()->with('success', '团队成员添加成功');
}

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