実現したいこと
laravel,vue3,inertiaのCRUD処理を実装させたいです。
特に現段階ではEdit.vueで編集した投稿内容をformのsubmit処理した際、formデータをlaravelにPUTメソッドで渡したいと思っています。
発生している問題・分からないこと
送信処理を実行するとこのようなエラーメッセージが出ました。
エラーメッセージ
error
1Ziggy error: 'post' parameter is required for route 'posts.update'.
該当のソースコード
Edit.vue
1<script setup> 2import { Head, useForm } from '@inertiajs/vue3'; 3import { route } from '../../../../vendor/tightenco/ziggy/src/js'; 4 5const props = defineProps({ 6 post: { 7 type: Object, 8 required: true, 9 } 10}); 11 12const form = useForm({ 13 title: props.post.title || '', 14 content: props.post.content || '', 15 image: null, 16 _method: 'PUT', 17}); 18 19 20const handleFileChange = (e) => { 21 form.image = e.target.files[0]; 22} 23 24const submit = (post)=>{ 25 console.log(form.data()); 26 form.post(route('posts.update'),post.id),{ 27 forceFormData: true, 28 } 29 30}; 31 32</script> 33 34<template> 35 <Head title="投稿編集" /> 36 <div> 37 <h1>投稿編集</h1> 38 <!-- 画像データの時はformにenctype必須 --> 39 <form @submit.prevent="submit" enctype="multipart/form-data"> 40 <div> 41 <label for="title">タイトル</label> 42 <input v-model="form.title" id="title" type="text" /> 43 <div v-if="form.errors.title" class="text-red-600">{{ form.errors.title }}</div> 44 </div> 45 <div> 46 <label for="content">レシピ詳細</label> 47 <textarea v-model="form.content" id="content"></textarea> 48 <div v-if="form.errors.content" class="text-red-600">{{ form.errors.content }}</div> 49 </div> 50 <div> 51 <label for="image">画像アップロード</label> 52 <input @change="handleFileChange" type="file" id="image" /> 53 </div> 54 <button type="submit">送信</button> 55 </form> 56 <div v-if="post.image_path"> 57 <img class="h-auto max-w-14 rounded-lg" :src="post.image_path" alt="Current Image"/> 58 </div> 59 </div> 60</template> 61
Postcontroller.php
1public function update(PutRequest $request, string $id) 2 { 3 $post = Post::findOrFail($id); 4 $validated = $request->validated(); 5 6 if ($request->hasFile('image')) { 7 if ($post->image_path) { 8 try { 9 Storage::disk('s3')->delete($post->image_path); 10 $imagePath = $request->file('image')->store($this->diskImageFolder, 's3'); 11 $validated['image_path'] = Storage::disk('s3')->url($imagePath); 12 } catch (\Exception $e) { 13 return back()->withErrors(['image' => '画像のアップロードに失敗しました: ' . $e->getMessage()]); 14 } 15 } 16 } 17 // 投稿を更新 18 $post->update($validated); 19 20 return redirect()->route('posts.index'); 21 }
web.php
1Route::resource('posts', PostController::class);
vendor/tightenco/ziggy/src/js/index.js
1import Router from './Router.js'; 2 3export function route(name, params, absolute, config) { 4 const router = new Router(name, params, absolute, config); 5 6 return name ? router.toString() : router; 7} 8 9export const ZiggyVue = { 10 install(app, options) { 11 const r = (name, params, absolute, config = options) => 12 route(name, params, absolute, config); 13 14 if (parseInt(app.version) > 2) { 15 app.config.globalProperties.route = r; 16 app.provide('route', r); 17 } else { 18 app.mixin({ 19 methods: { 20 route: r, 21 }, 22 }); 23 } 24 }, 25}; 26 27export function useRoute(defaultConfig) { 28 if (!defaultConfig && !globalThis.Ziggy && typeof Ziggy === 'undefined') { 29 throw new Error( 30 'Ziggy error: missing configuration. Ensure that a `Ziggy` variable is defined globally or pass a config object into the useRoute hook.', 31 ); 32 } 33 34 return (name, params, absolute, config = defaultConfig) => 35 route(name, params, absolute, config); 36} 37
試したこと・調べたこと
上記の詳細・結果
Ziggyについてのエラー解決記事を探していますが、如何せん記事数が少ないので解決には至っていません。
どうか解決策をご教授頂けると嬉しいです。
補足
特になし
0 コメント