如何在Inertiajs/Laravel的useForm变量中绑定输入value参数

解决方案 #

第一步：修正Props类型 #

首先，sData是用于v-for循环的数组，但你在props里定义成了String，这会导致循环报错，先改成Array类型：

const props = defineProps({
    sData: Array
});

方法一：初始化useForm时直接赋值（单ChildID场景） #

如果sData里只有一条数据，直接在useForm初始化时把ChildID加入字段列表：

const form = useForm({
    // 从sData中取第一个ChildID，为空时设默认值
    ChildID: props.sData[0]?.ChildID || '',
    hobbie: '',
    physical_health: '',
    education:'',
    mental_health:'',
    behaviour: '',
    self_care: '',
    life_skill: '',
});

然后把表单里的ChildID输入框改成v-model绑定（如果不需要显示，改成hidden类型）：

<div v-for="data in sData" :key="data.ID">
    <input type="hidden" name="ChildID" v-model="form.ChildID">
</div>

方法二：提交时手动追加数据（无需修改表单） #

如果不想调整表单结构，可以在submit方法里，把ChildID从props中取出，和现有表单数据合并后提交：

const submit = () => {
    // 取第一个ChildID，若为多条可改成数组格式
    const childId = props.sData[0]?.ChildID;
    
    form.post(route('add_station_1'), {
        // 合并现有表单数据和ChildID
        data: {
            ...form.data(),
            ChildID: childId
        },
        onFinish: () => form.reset(),
    });
};

方法三：多ChildID场景处理 #

如果sData有多条数据，需要提交所有ChildID，把useForm里的字段改成数组类型：

const form = useForm({
    ChildIDs: props.sData.map(item => item.ChildID),
    // 其他字段保持不变
    hobbie: '',
    physical_health: '',
    education:'',
    mental_health:'',
    behaviour: '',
    self_care: '',
    life_skill: '',
});

提交时ChildIDs数组会自动随表单数据传给控制器，无需修改现有表单结构。

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