質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

0回答

1081閲覧

VueコンポーネントからLalavel側にaxiosでPOST送信すると404 Not Found

chocomint20

総合スコア1

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2020/09/20 11:55

編集2020/09/20 13:49

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問