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

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

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

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

解決済

Laravel+vueでpostを行なった場合に422エラーが発生する

pmo23
pmo23

総合スコア14

Vue.js

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

2回答

-1評価

0クリップ

9235閲覧

投稿2019/09/11 06:14

編集2019/09/11 07:42

現在以下のサイトを参考にツイート投稿アプリケーションを作成していますが、formで送信すると以下のエラーが表示されます。
前回に質問した403エラーは表示されなくなりましたが次は422エラーが表示されます。formバリデーションが問題なのでしょうか。laravel,vueが初心者なので、アドバイス宜しくお願い致します。

参考サイト( Vue.js + Vue Router + Vuex とサーバーサイドに Laravel を使用したシングルページ Web アプリケーションの開発)リンク内容

###エラーメッセージ

POST http://localhost:8000/api/tweets 422 (Unprocessable Entity) [Vue warn]: Error in v-on handler (Promise/async): "Error: Request failed with status code 422" found in ---> <TweetForm> at resources/js/components/TweetForm.vue <Navbar> at resources/js/components/Navbar.vue <App> at resources/js/App.vue <Root> Error: Request failed with status code 422

###api.php

<?php use Illuminate\Http\Request; /* |-------------------------------------------------------------------------- | API Routes |-------------------------------------------------------------------------- | | Here is where you can register API routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | is assigned the "api" middleware group. Enjoy building your API! | */ // 会員登録 Route::post('/register', 'Auth\RegisterController@register')->name('register'); // ログイン Route::post('/login', 'Auth\LoginController@login')->name('login'); // ログアウト Route::post('/logout', 'Auth\LoginController@logout')->name('logout'); // ログインユーザー Route::get('/user', function () { return Auth::user(); })->name('user'); // tweet投稿 Route::post('/tweets', 'TweetController@create')->name('tweet.create');

###TweetController.php

<?php namespace App\Http\Controllers; use App\Http\Requests\StoreTweet; use App\Tweet; use Illuminate\Http\Request; use Illuminate\Support\Facades\Auth; use Illuminate\Support\Facades\DB; use Illuminate\Support\Facades\Storage; class TweetController extends Controller { public function __construct() { // 認証が必要 $this->middleware('auth'); } /** * tweet投稿 * @param StoreTweet $request * @return \Illuminate\Http\Response */ public function create(StoreTweet $request) { $tweet = new Tweet(); $tweet->user_id = Auth::user()->id; $tweet->text = $request->get('text'); Auth::user()->tweets()->save($tweet); // return redirect()->route('tweets.index', [ // 'id' => $tweet->id, // ]); // リソースの新規作成なので // レスポンスコードは201(CREATED)を返却する return response($tweet, 201); } }

###TweetForm.vue

<template> <nav v-show="value" class="panel panel-default tweet-form"> <div class="panel-body"> <div v-show="loading" class="panel"> <Loader>Sending your tweet...</Loader> </div> <form v-show="! loading" class="form" @submit.prevent="create"> <div class="form-group"> <textarea class="form__item form-control" rows="5" v-model="text"></textarea> </div> <p>{{ text }}</p> <div class="text-right"> <button type="submit" class="btn btn-primary">ツイート</button> </div> </form> </div> </nav> </template> <script> import Loader from './Loader.vue' export default { components: { Loader }, props: { value: { type: Boolean, required: true } }, data () { return { loading: false, text: '', } }, methods: { async create () { // ローディング表示 this.loading = true const response = await axios.post('/api/tweets', this.text) this.reset() this.$emit('textarea', false) // ローディングを非表示 this.loading = false this.$router.push(`/tweets/${response.data.id}`) } } } </script>

###User.php

/** * リレーションシップ - tweetsテーブル * @return \Illuminate\Database\Eloquent\Relations\HasMany */ public function tweets() { return $this->hasMany('App\Tweet'); }

###StoreTweet.php

<?php namespace App\Http\Requests; use Illuminate\Foundation\Http\FormRequest; class StoreTweet extends FormRequest { /** * Determine if the user is authorized to make this request. * * @return bool */ public function authorize() { return true; } /** * Get the validation rules that apply to the request. * * @return array */ public function rules() { return [ 'text' => 'required' ]; } }

###resources/js/store/auth.js

const state = { user: null } const getters = { check: state => !! state.user, username: state => state.user ? state.user.name : '' } const mutations = { setUser (state, user) { state.user = user } } const actions = { async register (context, data) { const response = await axios.post('/api/register', data) context.commit('setUser', response.data) }, async login (context, data) { const response = await axios.post('/api/login', data) context.commit('setUser', response.data) }, async logout (context) { const response = await axios.post('/api/logout') context.commit('setUser', null) }, async currentUser (context) { const response = await axios.get('/api/user') const user = response.data || null context.commit('setUser', user) } } export default { namespaced: true, state, getters, mutations, actions }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

mikkame

2019/09/11 07:06

質問のタイトルを修正して欲しいです。 例えば「Laravel+vueでpostを行なった場合に422エラーが発生する」のような形にすれば タイトルを見ただけで問題の内容が検討がつきます。今のままでは、質問を開いて詳細を読まねば具体的な内容がわかりません。また、シリーズもののようにしてしまうと前回の質問も読まないといけないのでは、となりますし、私は最初重複投稿かと思いました
pmo23

2019/09/11 07:41

次回から気をつけます。 ありがとうございます。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。