laravel 组件中未定义 Vue.js 道具
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42323029/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue.js props not defined in Component
提问by BassMHL
The parent apphas an object messages, that is being filled correctly from the server. But the chat-roomcomponent's props messagesis not feeding from the parent's messages. What am I missing??
父app对象有一个对象messages，它正在从服务器正确填充。但是chat-room组件的 propsmessages不是从父级的messages. 我错过了什么？？
Here is my blade template:
这是我的刀片模板：
<chat-room></chat-room>
<chat-composer v-on:messagesent="addMessage"></chat-composer>
Here is my chat-roomcomponent:
这是我的chat-room组件：
<template>
<div class="chat-room">
<chat-message v-for="message in messages" :message="message"></chat-message>
</div>
</template>
<script>
export default {
props : ['messages'],
}
</script>
Here is my app.js:
这是我的 app.js：
Vue.component('chat-message', require('./components/ChatMessage.vue'));
Vue.component('chat-room', require('./components/ChatRoom.vue'));
Vue.component('chat-composer', require('./components/ChatComposer.vue'));
const app = new Vue({
el: '#app',
data: {
messages: []
},
methods: {
addMessage(message) {
this.messages.push(message);
axios.post(base_url+'/room/1/write_message', message).then(response => { });
}
},
created() {
axios.get(base_url+'/room/1/messages').then(response => {
this.messages = response.data;
console.log(this.messages); //this returns an Array[4]!
});
}
});
回答by Rwd
The reason you're not seeing the messages inside your chat-roomcomponent is because you're not passing them to it.
您没有在chat-room组件中看到消息的原因是因为您没有将它们传递给它。
Change:
改变：
<chat-room></chat-room>
To be:
成为：
<chat-room :messages="messages"></chat-room>
Hope this helps!
希望这可以帮助！
