Q&A
vueコンポーネントでPOST送信した際に、404エラーが出て上手く動作しません。
ルーティングの設定などはちゃんと出来ていると思っているのですが、何が原因なのでしょうか？どなたか分かるかたご教授いただきたいです
なお、Auth関連のpost機能ではそのようなエラーは発生せず正常に動作しています。
先日まで普通に動いていたと思うのですが、macOSのアップデートをしてから動かなくなった気がしなくもないです。アップデートしたことによってこのようなことになるのもありえるんでしょうか
web.php
Auth::routes(); Route::group(['middleware' => 'auth'], function() { Route::get('aidhias/{id}/edit', 'AidhiasController@aidhiaEdit')->name('aidhia.edit'); Route::post('aidhias/{id}/update', 'AidhiasController@aidhiaUpdate'); });
AidhiasController.php
// アイディア編集画面表示 public function aidhiaEdit($id) { $aidhia = Aidhia::with(['user', 'category', 'reviews' => function($query){ $query->with('user'); }])->find($id); $categories = Category::all(); return view('aidhias.aidhiaEdit', [ 'aidhia' => $aidhia, 'categories' => $categories, ]); } // アイディア編集機能 public function aidhiaUpdate(Request $request) { $request->validate([ 'pic' => 'image', 'title' => 'required|string|max:40', 'overview' => 'required|string|max:255', 'category_id' => 'required|int', 'contents' => 'required|string|max:3000', 'price' => 'required|int', ]); $file_name = $request->file->getClientOriginalName(); $request->file->storeAs('public/images', $file_name); $aidhia = new Aidhia(); $aidhia->pic = '/storage/images/'.$file_name; $aidhia->title = $request->title; $aidhia->overview = $request->overview; $aidhia->category_id = $request->category_id; $aidhia->contents = $request->contents; $aidhia->price = $request->price; $aidhia->user_id = Auth::id(); $aidhia->save(); return 'my/aidhias'; }
AidhiaEdit.vue
<template> <div> <form class="l-form p-form" enctype="multipart/form-data"> <div class="l-form__body p-form__body"> <div class="form-group"> <label for="file" class="l-form__label p-form__label">画像 <div class="l-form__input-wrap p-form__input-wrap"> <img v-if="prevewImg || aidhia.pic" :src="prevewImg || aidhia.pic" alt="" class="l-form__input-img p-form__input-img"/> <input id="file" class="l-form__input-file p-form__input-file" type="file" name="pic" @change="fileSelected" placeholder="ドラッグ＆ドロップまたはクリックしてファイルをアップロード"> <div v-if="!prevewImg & !aidhia.pic" class="p-form__input-over"> <i class="fas fa-camera-retro icon-camera"></i> <p class="l-form__info p-form__info">ドラッグ＆ドロップ</p> <p class="l-form__info p-form__info">またはクリックしてファイルをアップロード</p> </div> <div class="area-msg"> {{ errors.pic }} </div> </div> </label> </div> </div> <div class="l-form__body p-form__body"> <div class="form-group"> <label for="title" class="l-form__label p-form__label">アイディア名</label> <span class="label-require">必須</span> <input id="title" class="l-form__input p-form__input" :class="{ hasErr: errors.title }" type="text" name="title" :value="title" @input="title = $event.target.value" placeholder="40文字まで"> </div> <div class="area-msg"> {{ errors.title }} </div> <div class="l-form__body p-form__body"> <div class="form-group"> <label for="category" class="l-form__label p-form__label">カテゴリー</label> <span class="label-require">必須</span> <div class="l-form__select p-form__select"> <select name="category_id" v-model="category_id" id="category" class="l-form__select-box p-form__select-box"> <option value="0">選択してください</option> <option v-for="category in categories" :value="aidhia.category_id" @input="category.id = $event.target.value"> {{ category.name }} </option> </select> <i class="fas fa-angle-down icon-angle-down"></i> </div> </div> <div class="form-group"> <label for="contents" class="l-form__label p-form__label">アイディアの内容</label> <span class="label-require">必須</span> <textarea rows="7" id="contents" class="l-form__textarea p-form__textarea" :class="{ hasErr: errors.contents }" name="contents" :value="contents" @input="contents = $event.target.value" placeholder="3000文字以内"> </textarea> <div class="area-msg"> {{ errors.contents }} </div> <p class="l-form__counter p-form__counter"><template>{{ contents.length }}</template> / 3000</p> </div> </div> <div class="l-btn-conteiner"> <button type="button" class="p-btn btn-primary" @click="aidhiaUpdate">編集する</button> </div> <div style="text-align: center;"> <a href="#" class="l-form__link p-form__link">もどる</a> </div> </form> </div> </template> <script> export default { props: { aidhia: Object, categories: Array, }, data: function() { return { fileInfo: '', title: this.aidhia.title, category_id: this.aidhia.category_id, contents: this.aidhia.contents, errors: '', prevewImg: '', } }, methods: { fileSelected(event) { console.log(event.target.files[0]); this.fileInfo = event.target.files[0]; this.createImage(this.fileInfo); }, confirmImage(e) { this.file = e.target.files[0]; }, createImage(file) { let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = event => { this.prevewImg = event.target.result; }; }, aidhiaUpdate() { if(!confirm('編集を完了しますか？')) { return; } this.errors = {}; var self = this; var url = 'aidhias/' + this.aidhia.id + '/update'; var formData = new FormData() formData.append('file', this.fileInfo); formData.append('title', this.title); formData.append('category_id', this.category_id); formData.append('contents', this.contents); axios.post(url, formData) .then(function (response) { self.fileInfo = ''; self.title = ''; self.category_id = ''; self.contents = ''; location.href = response.data; }) .catch(function (error) { if(error.response) { console.log(error.response.data); } var responseErrors = error.response.data.errors; var errors = {}; console.log(errors); for(var key in responseErrors) { errors[key] = responseErrors[key][0]; } self.errors = errors; }); }, }, mounted() { console.log('Component mounted.') } } </script>
あなたの回答
tips
プレビュー
