laravel 5.4 Vue Component not workng

Question

I have a Chat-User.vue file in components like

<template lang="html">
    <div class="chat-user">
        <a href="#" class="close" v-on:click="hideUsers">&times;</a>
        <h1>Users in Chat Room</h1>
        <hr />
        Number of users = {{ usersInRoom.length }}
        <div class="users" style="overflow: hidden;">
            <div class="col-sm-3 w3-margin-bottom" v-for="userInRoom in usersInRoom" style="overflow: hidden;">
                <div class="u-1">
                    <img :src="userInRoom.profile" width="50" height="50">
                </div>
                <div class="u-2">
                    {{ userInRoom.name }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['usersInRoom']
}
</script>

My app.js file

Vue.component('chat-user', require('./components/Chat-User.vue'));

const app = new Vue({
    el: '#app',
    data: {
        usersInRoom: []
    },
});

and the indx.blade.php file

<div id="app">
    <chat-user v-bind:usersInRoom="usersInRoom"></chat-user>
</div>

In usersInRoom variable it will add data's automatically.

But when I look the browser I cannot see any thing in the place of <chat-user></chat-user> , Just only <!----> .

I think it was commented out by vue for some reason. I tried removing all {{ usersInRoom }} and then I can see the other things like <h1>Users in Chat Room</h1> and the <hr> .

if I am not wrong The component file is not recognizing any variable like usersInRoom , when I have a variable like that.

Please some one tell me how to fix this problem.

Answer 1

Html directives are case insensitive, in the documentation Vue mentions that you need to use kebab-case in binding props.

Try <chat-user v-bind:users-in-room="usersInRoom"></chat-user> Which will bind to the usersInRoom prop.

Answer 2

you cant use camel case for props. u need to to use kebab case.

and binding from vue 1, you can remove the "v-bind" string and just directly start at :

<chat-user :users-in-room="usersInRoom"></chat-user>