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

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

ただいまの
回答率

88.83%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,843

waiemu

score 14

前提・実現したいこと

  • 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 テストタイトル1 テスト
2 2 テストタイトル2 テスト
3 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側でのデータ取得方法が誤っているのでしょうか?
どこに問題があるか、何卒ご教示お願いいたします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mikkame

    2019/05/14 15:31

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

    キャンセル

  • waiemu

    2019/05/14 15:34

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

    キャンセル

回答 2

checkベストアンサー

0

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 16:44

    ありがとうございます。
    ご指摘いただいたおかげで問題が解決しました。
    また、postManというツールを使ったことがありませんでした。とても便利そうなので、今後使っていこうと思います。

    キャンセル

0

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),

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.83%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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