laravel 5.4 Vue组件无法运行

时间:2017-05-18 07:03:30

标签: php laravel vue.js laravel-5.4 vue-component

我在

等组件中有一个Chat-User.vue文件
<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>

我的app.js文件

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

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

indx.blade.php文件

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

usersInRoom变量中,它会自动添加数据。

但是,当我查看浏览器时,我无法在<chat-user></chat-user>的位置看到任何内容,只有<!---->

我认为由于某种原因它被vue注释掉了。我尝试删除所有{{ usersInRoom }},然后我可以看到其他内容,例如<h1>Users in Chat Room</h1><hr>

如果我没有错误当我有这样的变量时,组件文件无法识别任何变量,如usersInRoom

请有人告诉我如何解决这个问题。

2 个答案:

答案 0 :(得分:2)

Html指令不区分大小写,在documentation Vue中提到您需要在绑定道具中使用kebab-case。

尝试<chat-user v-bind:users-in-room="usersInRoom"></chat-user>哪个会绑定到usersInRoom道具。

答案 1 :(得分:1)

你不能使用驼峰盒来制作道具。你需要使用烤肉串。

并从vue 1绑定,你可以删除“v-bind”字符串,直接从以下位置开始:

Number