laravel 5.4 Vue 组件不起作用答案

【问题标题】：laravel 5.4 Vue Component not worknglaravel 5.4 Vue 组件不起作用
【发布时间】：2017-10-17 20:34:58
【问题描述】：

我在像

这样的组件中有一个 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 这样的任何变量。

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

【问题讨论】：

您的浏览器控制台是否提到任何错误？

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

【解决方案1】：

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

和从 vue 1 绑定，你可以删除 "v-bind" 字符串，直接从：开始：

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

【讨论】：

【解决方案2】：

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

尝试<chat-user v-bind:users-in-room="usersInRoom"></chat-user>，它将绑定到usersInRoom 属性。

【讨论】：