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.

Does your browser console mention any errors?

Dymen1
– Dymen1

2017-05-18 07:14:39 +00:00
Commented May 18, 2017 at 7:14 — Dymen1
– Dymen1, Commented May 18, 2017 at 7:14

tony19 · Accepted Answer · 2022-07-17 23:41:29Z

2

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.

edited Jul 17, 2022 at 23:41

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 18, 2017 at 7:42

Justin MacArthur

4,05024 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Winston Fale · Accepted Answer · 2017-05-18 12:54:11Z

1

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>

answered May 18, 2017 at 12:54

Winston Fale

1,3462 gold badges11 silver badges18 bronze badges

Collectives™ on Stack Overflow

laravel 5.4 Vue Component not workng

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related