Question

uck ofture typeError：无法阅读未定义的属性（阅读'post'） - 使用intertia.js创建一个laravel vue页面

2023-05-23

2022

laravel vue.js inertiajs

我正在使用 Vue.js 在 Laravel 中开发一个创建页面，使用 Inertia.js 框架进行服务器端渲染。但是，我遇到了一个错误，提示“未捕获 TypeError：无法读取未定义的属性（读取‘post’）”。尝试在页面上提交表单时发生此错误。

以下是我的代码结构细分：

创建页面

<div class="p-6 overflow-hidden bg-white rounded-md shadow-md dark:bg-dark-eval-1">
        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
            <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    <form @submit.prevent="form.post(route('users.store'))">
                        <div class="mb-6">
                            <label
                                for="name"
                                class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
                                >Name</label
                            >
                            <input
                                type="text"
                               
                                name="name"
                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                                placeholder=""
                            />
                        </div>

                        <div class="mb-6">
                            <label
                                for="email"
                                class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
                                >Email</label
                            >
                            <input
                                type="email"
                               
                                name="email"
                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                                placeholder=""
                            />
                        </div>

                        <div class="mb-6">
                            <label
                                for="password"
                                class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
                                >Password</label
                            >
                            <input
                                type="password"
                               
                                name="password"
                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                                placeholder=""
                            />
                        </div>

                        <div class="mb-6">
                            <label
                                for="password_confirmation"
                                class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
                                >Confirm Password</label
                            >
                            <input
                                type="password"
                               
                                name="password_confirmation"
                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                                placeholder=""
                            />
                        </div>


                    <BreezeButton
                  class="bg-blue-600 mr-2"
                ><button type="submit">Save User</button>
                  
                </BreezeButton>
                       
                 <BreezeButton
                  class="bg-gray-600 mr-2"
                ><Link :href="route('users.index')">Cancel</Link>
                  
                </BreezeButton>
                    </form>
                </div>
            </div>
        </div>
    </div>

<script>
import {Link, useForm} from "@inertiajs/inertia-vue3"

export default {
components : {
    Link
},
setup(){
    const form = useForm({
        name: '',
        email: '',
        password: '',
    })

    return { form }
}

}

用户控制器

public function store(Request $request){

  
       $users=User::create([
           'name' => $request->name,
           'email' => $request->email,
           'password' => $request->password,
       ]);
  
       return redirect()->route('users.index')
                       ->with('success','User created successfully.');
    }

路由

Route::post('/store', [UserController::class, 'store'])->name('users.store');

Answer 1

如果您正在使用设置，您会喜欢我的代码以获得更好的用户格式

首先，您无法访问 .vue 文件内的 route() ，它只能通过 .blade 扩展访问。

其次，将您的函数与模板分开。

<template>
...
<form @submit.prevent="submit">
...
</form>
...
</template>
<script setup>
import {Link, useForm} from "@inertiajs/inertia-vue3"

const form = useForm({
    name: '',
    email: '',
    password: '',
})

const submit = () => form.post('/store')

</script>