[Vue warn]:属性或方法“messages”未在实例上定义，但在呈现期间被引用
我正在测试VueJs的测试目的，用户将发送一些消息，消息将通过组件呈现到主页。
在这里，我使用了三个组件……但是当我发送消息时，我看到了以下消息……在控制台上：
[Vue 警告]：属性或方法“消息”不是在实例上定义的，而是在渲染过程中引用的。
[Vue 警告]：属性或方法 “addMessage” 不是在实例上定义的，而是在渲染过程中引用的。确保在 data 选项中声明反应式数据属性。
这是刀片页面：
<html>
<head>
<meta charset="utf-8">
<title>Chatroom</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div id="app">
<h1>Chatroom</h1>
<chat-log :messages="messages"></chat-log>
<chat-composer v-on:messagesent="addMessage"></chat-composer>
</div>
<script src="js/app.js" charset="utf-8"></script>
</body>
</html>
下面是ChatMessage.vue组件：
<template lang="html">
<div class="chat-message">
<p>{{ message.message }}</p>
<small>{{ message.user }}</small>
</div>
</template>
<script>
export default {
props: ['message']
}
</script>
<style lang="css">
.chat-message {
padding: 1rem;
}
.chat-message > p {
margin-bottom: .5rem;
}
ChatLog.vue
<template lang="html">
<div class="chat-log">
<chat-message v-for="message in messages" :message="message"></chat-message>
</div>
</template>
<script>
export default {
props: ['messages']
}
</script>
<style lang="css">
.chat-log .chat-message:nth-child(even) {
background-color: #ccc;
}
ChatComposer.vue
<template lang="html">
<div class="chat-composer">
<input type="text" placeholder="Start typing your message..." v-model="messageText" @keyup.enter="sendMessage">
<button class="btn btn-primary" @click="sendMessage">Send</button>
</div>
</template>
<script>
export default {
data() {
return {
messageText: ''
}
},
methods: {
sendMessage() {
this.$emit('messagesent', {
message: this.messageText,
user: "John Doe"
});
this.messageText = '';
}
}
}
</script>
<style lang="css">
.chat-composer {
display: flex;
}
.chat-composer input {
flex: 1 auto;
}
.chat-composer button {
border-radius: 0;
}
</style>
app.js （主 vue js 文件）
require('./bootstrap');
Vue.component('example', require('./components/Example.vue'));
Vue.component('chat-message', require('./components/ChatMessage.vue'));
Vue.component('chat-log', require('./components/ChatLog.vue'));
Vue.component('chat-composer', require('./components/ChatComposer.vue'));
const app = new Vue({
el: '#app',
data: {
messages: [
{
message: 'Hey!',
user: "John Doe"
},
{
message: 'Hello!',
user: "Jane Doe"
}
]
},
methods: {
addMessage(message) {
// Add to existing messages
this.messages.push(message);
// Persist to the database etc
}
}
});
共有1个答案
由于chat-log和chat-camer组件在主html页面中被引用，因此您发送给它们的数据必须在主Vue实例中。
作为 prop 发送的消息以及您希望成为侦听器的 addMessage 方法，该方法将在发送消息时通知主实例必须在主 Vue js 实例（根）内
new Vue({
//your code
data:{
messages:[]//populate it with some data
},
methods:{
addMessage(message){
//this will get called when chat composer calls sendMessage
}
}
})
-
我正在浏览瑞克的角色 但我得到下面提到的错误，请帮我解决这个问题 错误1：[Vue警告]：属性或方法“列表”未在实例上定义，但在呈现期间引用。通过初始化属性，确保此属性在数据选项或基于类的组件中是反应性的。
-
这个问题让我很恼火，我是Vue新手，我正在尝试制作一个简单的应用程序来练习。 现在我正在使用Vuex和Vue路由器，下面是代码： 路由文件非常简单，只是不在家的路由的懒负载。 视图组件，它只渲染视图子对象： songs组件，这是我制作逻辑的容器（现在就列出东西） 我认为问题出在渲染周期中，组件已装入，数据尚未加载，但这不是异步数据（至少不是我的），而是在状态下硬编码，初始化为空数组： 因为我使用V
-
下面是组件&提前感谢您：
-
我试图只显示一个覆盖，如果我的搜索输入包含任何文本。 这是我的模板，其中我的输入字段是： ： 当我在控制台中进行检查时，会更新我在输入字段中写入的任何文本。 然后，我尝试将此变量传递给另一个组件，该组件保存我的overlay div： Overlay.vue： 然而，这给我下面的错误： [Vue warn]：呈现错误：“TypeError:无法读取未定义的属性'length'” 我到底做错了什么？
-
问题内容： 我正在借助以下方法设置新的React：https : //github.com/facebookincubator/create-react- app 但是，我遇到了一个棉绒问题。我收到以下掉毛错误。 这是导致问题的代码： 我试着使用react / prop-types规则，但无济于事。 问题答案： 根据这个问题发表评论。 这似乎是因为您在安装时仅应使用create-react- ap
-
问题内容： 我想在我的登录表单中添加一些iOS特定的标签属性。如果我查看网页源代码，则不存在自动更正，自动大写和拼写检查这些属性。这是什么原因呢？我正在使用JSF2.x。 问题答案： 这是设计使然。您只能指定JSF组件本身支持的属性（即，它在标签文档的属性列表中列出）。您不能指定任意其他属性，所有这些属性都会被忽略。 有几种解决方法： 如果您已经在使用JSF 2.2+，只需将其指定为passthr
-
问题内容： 当我将“数据”变量设为类变量时，以下工作有效，但是当我将其变为对象变量时，则不会调用描述符。请帮忙。 问题答案： 这是因为描述符仅应定义为类属性，而不是实例属性： 从文档： 以下方法仅在包含该方法的类的实例（所谓的描述符类）出现在所有者类中（ 描述符必须位于所有者的类字典或父类的父类的类字典中 ）时适用。 为了使描述符也能与实例属性一起使用，您需要重写。方法（尚未进行全面测试，但可以根
-
我正在开发一个Rails应用程序，它有两个名称空间，分别是用于管理员的admin和用于移动设备的api 昨天发生了一件奇怪的事。我在我的PostgreSQL数据库中创建了一个新表，由id、name、created\u at、Update\u at组成。 我试图使用名称空间获取所有设施http://localhost:3000/admin/facilities它运行良好（返回HTML和工具列表）。