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

Question

現在以下のサイトを参考にツイート投稿アプリケーションを作成していますが、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
}

Comments

[mikkame]

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

[pmo23]

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

Answer 1

const response = await axios.post('/api/tweets', this.text)

this.textと渡した場合は文字列が渡されるだけで、キー名と値のペアではない
よって、Laravelではtextというキーの値を取得できないため、StoreTweetの検証を突破できないので422

Comments

[pmo23]

ユーザー認証の時のようにストアを作成(auth.js)すればいいということでしょうか?

Answer 2

エラー原因についてはもうお一人の方が書いてくださっている通りだと思います。
post部分を以下のように変更してみてください。

const response = await axios.post('/api/tweets', { text: this.text })

Comments

[pmo23]

解決しました。
ありがとうございます。