常連

注目の的

社会貢献

質問力

自己紹介

Dockerの勉強のためにlaradockのDockerfileを見ています。
わからない記述があったので質問させてください。

「laradock/workspace/Dockerfile」で
「ARG LARADOCK_PHP_VERSION」はなぜ2回記述されているのですか？

```
#
#--------------------------------------------------------------------------
# Image Setup
#--------------------------------------------------------------------------
#
# To edit the 'workspace' base Image, visit its repository on Github
#    https://github.com/Laradock/workspace
#
# To change its version, see the available Tags on the Docker Hub:
#    https://hub.docker.com/r/laradock/workspace/tags/
#
# Note: Base Image name format {image-tag}-{php-version}
#

ARG LARADOCK_PHP_VERSION

# FROM laradock/workspace:2.2-${LARADOCK_PHP_VERSION}
FROM letsdockerize/laradock-workspace:2.4-${LARADOCK_PHP_VERSION}

LABEL maintainer="Mahmoud Zalt <mahmoud@zalt.me>"

ARG LARADOCK_PHP_VERSION
```

laradock、workspaceのDockerfileについて

LaravelにVue.jsを導入してオリジナルサービスを練習で作っているのですが、
bladeにapp.jsで登録しているComponentsが画面に表示されません。
Consoleのエラーをみると以下のように表示されているのですが、自己解決ができなかったので、質問させていただきます。
コードも伏せて載せておきますのでどうかよろしくお願いします。

エラー文
=
[Vue warn]: Unknown custom element: <card-list> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

実際のコード
=
show.blade.php
```PHP
@extends('layouts.app')

@section('header_menu')
@parent

<body class="{{$board->color}}">
    @section('content')
    <div id="app">
        <card-list></card-list>
    </div>
    @endsection
</body>

```
app.js
```Javascript

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('card-list', require('./components/CardList.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app'
});
```

CardList.vue
```
<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Card-List</div>
                    <div class="card-body">
                        Card-List
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>
```

Vue.js Componentsが反映されない

### 前提・実現したいこと
- 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側でのデータ取得方法が誤っているのでしょうか？
どこに問題があるか、何卒ご教示お願いいたします。