Laravel + Vue.js + axios でデータ取得ができない

前提・実現したいこと

PHP7.2
Laravel5.6
MySQL5.6
Vue.js 2.5.7
laravel-mix 4.0.15

チャット形式の掲示板を作成したいと考えています。
データの取得がうまくいかず、ご教示いただければと思います。

手順
1 掲示板の作成（post create）
2 掲示板へコメントを送信(comment store)
3 掲示板の作成時にuser_id が、
コメントの作成時にuser_idとpost_idが保存される
が基本動作です。

usersテーブル

id	name	age
1	一郎	30
2	次郎	29
3	三郎	28
4	四子	27
5	五子	26
6	六子	25

postsテーブル

id	user_id	title	body
1	1	テストタイトル１	テスト
2	2	テストタイトル２	テスト
3	3	テストタイトル３	テスト

commentsテーブル

id	post_id	user_id	body
1	1	1	テストコメント
2	2	2	テストコメント
3	3	3	テストコメント

該当のソースコード

ChatformComponent.vue

<template>
    <div class="d-flex">
          <input id="user_id" class="form-control" type="hidden" name="user_id"/>
          <input id="post_id" class="form-control" type="hidden" name="post_id"/>
          <textarea id="body" class="form-control" type="textarea" name="body" v-model="body"></textarea>
          <button type="button" class="btn btn-primary" @click="sendComment()">送信</button>
    </div>
</template>
<script>
//スレッドへのコメント
export default({
  name: "chatform-component",
  props:[
      'userId',
      'postId'
  ],
  data: function() {
      return {
          user_id: this.userId,
          post_id: this.postId,
          body: ''
      }
  },
  methods: {
      getComments: function() {
          axios.get('/posts/' + this.post_id);
      },
      sendComment: function() {
      const url = '/comments';
      let params = new URLSearchParams();
      params.append (user_id, this.user_id),
      params.append (post_id, this.post_id),
      params.append (body, this.body),
      axios.post(url, params, { header: {'Content-Type': 'application/x-www-form-urlencoded'}})
        .then(function(response){
            chatform-component.getComments()
            // 成功したらメッセージをクリア
            this.body = '';
            console.log(this.params);
        })
        .catch(error => console.log(error));
      }
  },
  mounted() {
      this.getComments();
  }
});
</script>

CommentsController.php

    public function store(Request $request)
    {
            if (!$request->input('user_id')) {
                return ('ユーザーが指定されていません');
            }
            $comment = new Comment;
            $comment->comment_user_id = $request->input('user_id');
            $comment->post_id = $request->input('post_id');
            $comment->body = $request->input('body');
            $comment->save();
            return view('posts.show');
        }
    }

app.js

Vue.component('chatform-component', require("./ChatformComponent.vue").default);
const chat = new Vue({
  el: "#chat",
});

app.js

 Route::post('comments', 'CommentsController@store');//コメント保存

post/show.blade.php

    <div class="container">
        <div>
            <h1>{{ $post->title }}</h1>
            <p>{{ $post->body }}</p>
            <section>
                <h2>{{__('コメント')}}</h2>
                /*コメントの表示 html*/
                <div id="chat" class="w-100">
                <chatform-component user-id="{{ $user->id }}" post-id="{{ $post->id }}"></chatform-component>
                </div>
            </section>
        </div>
    </div>
@endsection

Chromeで検証を行ったところ、Component内のdataはきちんと入っており、送信ボタンclickで送信はできます。
開発ツールで確認したところ「ユーザーが選択されていません」のレスポンスが返ってきます。
Headers内では、以下の通りでした。
FormData
[object HTMLInputElement]: 1 //user_id
[object HTMLInputElement]: 2 //post_id
[object HTMLTextAreaElement]: テストコメント　//body

###試したこと
axios.postの部分でURLSearchParamsを使わず、そのまま送信をして、Laravel側でjsondecodeを行いましたが、値が入っておりませんでした。

Laravel Controller側でのデータ取得方法が誤っているのでしょうか？
どこに問題があるか、何卒ご教示お願いいたします。

mikkame

2019/05/14 06:31

質問タイトルだけよむと「どうぞ！作ってください」となるので、具体的に何で困っているかをタイトルに入れた方がいいでしょう

waiemu

2019/05/14 06:34

ご指摘ありがとうございます。訂正しました。

回答2件

params.append (user_id, this.user_id),
params.append (post_id, this.post_id),
params.append (body, this.body),

を

params.append ('user_id', this.user_id),
params.append ('post_id', this.post_id),
params.append ('body', this.body),

で思った通りの動作になりました。

コロン抜け。簡単なミスでした。お騒がせしました。

投稿2019/05/14 07:42

waiemu

総合スコア14

ベストアンサー

FormData
[object HTMLInputElement]: 1 //user_id
[object HTMLInputElement]: 2 //post_id
[object HTMLTextAreaElement]: テストコメント　//body

これなんですが、値のname（キーともいう？）部分が、objectとtoStringした時になってませんか？

正しくは

FormData
user_id: 1   //user_id
post_id: 2   //post_id
body: テストコメント　//body

に、なっているべきかと思います。

とりあえず、Vue,Axiosは置いといて、postManとか、普通のformで意図した動作をするか確認する。
意図した通りに動くならフロントの問題、動かないならバックエンドの問題
フロントの問題のようなら、postManやformで送ったリクエスト内容と、Axiosで送ったリクエスト内容の差を検証する

みたいな感じでデバッッグしていくといいでしょう

投稿2019/05/14 06:50

mikkame

総合スコア5036