Vue コンポーネントにuser_idを渡したいがundefinedになる

Question

前提・実現したいこと

Laravelで掲示板（DM機能）を作るために、
メッセージコンポーネントにuser_idとboard_idをpropsで渡し、コンポーネント内で入力されたメッセージと共にデータベースに登録したい。

発生している問題・エラーメッセージ

chromeのVueツールで確認したところ、
$attrsには値が入っているが、dataは「undefined」になってしまう。

▼data
bord_id:undefined
message:""
user_id:undefined

▼$attrs
bordid:1
userid:1

そのため、axios.getで取得しようとしているメッセージ一覧が500エラーになってしまう。

GET http://127.0.0.1:8000/bords/undefined/messages/ 500 (Internal Server Error)

web.php

Route::resource(
    'bords.messages', 'MessagesController', ['only' => ['index', 'store']]);
Route::post('/addMessage', 'MessagesController@store');

app.js

Vue.component('message-component', require("./components/ExampleComponent.vue").default);
const chat = new Vue({
    el: "#chat",
    data: function(){
        return {
            userId: '',
            bordId: '',
        }
    }

});

ExampleComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                        <form>
                            <input type="hidden" class="form-control" id="user_id" name="user_id">
                            <input type="hidden" class="form-control" id="bord_id" name="bord_id">

                            <textarea id="message" class="form-control" type="textarea" name="message" v-model="message"></textarea>
                            <button type="button" class="btn btn-primary" @click.privent="sendMessage()">送信</button>
                        </form>
              </div>
        </div>
    </div>
</template>

<script>
    export default ({
        name: 'message-component',
        proprs:[
            'userId',
            'bordId',
        ],
        data: function(){
            return {
                user_id : this.userId,
                bord_id : this.bordId,
                message: '',
            }
        },
        methods: {
            getMessages() {
                axios.get('/bords/' + this.bord_id + '/messages/');
            },
            sendMessage() {
                const url = '/addMessage';
                let params = new URLSearchParams();
                    params.append ('user_id', this.user_id),
                    params.append ('bord_id', this.bord_id),
                    params.append ('message', this.message),
                    axios.post(url, params, { header: {'Content-Type': 'application/x-www-form-urlencoded'}})
                        .then(function(response){
                            message-component.getMessage()
                            // 成功したらメッセージをクリア
                            this.message = '';
                            console.log(this.params);
                        })
                        .catch(error => console.log(error));
            },

        },
        mounted() {
            this.getMessages();

        }
    });
</script>

messages.blade.php

 <div id="chat">
   <message-component :user-id="{{ Auth::id() }}" :bord-id="{{ $bord->id }}"></message-component>
 </div>

試したこと

親コンポーネントのdataに入れ忘れていたからだと思いましたが、変わりませんでした。

補足情報（FW/ツールのバージョンなど）

Laravel 5.5

解決のヒントをいただけないでしょうか？
何卒、よろしくお願いいたします。

Answer 1

:user-id="{{ Auth::id() }}" は
v-bind-user-id="{{ Auth::id() }}"と同じ意味です。
Auth::id()が仮に1なら

dataに含まれる1というプロパティの値ををバインドするという意味になります
dataにはuser_id、bord_idしかないため、undefinedになります。

具体的な対応方法ですがdataに値を入れて
:user-id="user_id" として参照させるか

user-id="{{ Auth::id() }}"
としてください

Comments

[makiri2002]

ご回答ありがとうございました。大変助かりました。