laravel 5.4 Vue 組件不起作用

Question

我在組件中有一個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這樣的任何變量。

請有人告訴我如何解決這個問題。

Answer 1

Html 指令不區分大小寫，在 Vue 文檔中提到您需要在綁定道具中使用 kebab-case。

嘗試<chat-user v-bind:users-in-room="usersInRoom"></chat-user>它將綁定到usersInRoom道具。

Answer 2

你不能用駱駝套做道具。 你需要使用烤肉串盒。

並從 vue 1 綁定，您可以刪除“v-bind”字符串並直接從以下位置開始：

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