Laravel+InertiaJS/Vue3项目$page未定义错误及表单赋值问题

问题根源 #

在Vue3的<script setup>语法糖环境下，无法直接访问全局的$page对象，必须通过Inertia官方提供的usePage()钩子来获取页面传递的props。

修复代码 #

将组件代码修改为以下内容，重点是导入usePage并正确获取props：

<template>
    <form @submit.prevent="submit">
        <input id="profile_name" v-model="form.profile_name" />

        <input id="description" v-model="form.description" />

        <button type="submit">Submit</button>
    </form>
</template>

<script setup>
import { useForm, usePage } from '@inertiajs/vue3';
import { router } from '@inertiajs/vue3';

// 获取页面传递的props
const { props } = usePage();

// 初始化表单：优先使用props中的值，为空则用默认字符串
const form = useForm({
    profile_name: props.profile_name ?? 'profile_name',
    description: props.description ?? 'description',
});

function submit() {
    router.post('/members', form);
}
</script>

补充说明 #

• 使用??空值合并运算符比||更严谨，只会在值为null或undefined时启用默认值，避免像0、空字符串这类合法业务值被错误替换。
• 需确保Laravel后端在渲染该页面时，已将profile_name和description正确注入到Inertia的props中。

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