我有一个Chat-User.vue
像
<template lang="html">
<div class="chat-user">
<a href="#" class="close" v-on:click="hideUsers">×</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
,当我有这样的变量时。
请有人告诉我如何解决这个问题。
最佳答案
Html 指令不区分大小写,在 documentation 中Vue 提到你需要在绑定(bind) props 中使用 kebab-case 。
尝试<chat-user v-bind:users-in-room="usersInRoom"></chat-user>
这将绑定(bind)到 usersInRoom
Prop 。
关于php - laravel 5.4 Vue 组件不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44040802/