1
私はVueJsをテスト目的でテストしています。ユーザーはメッセージを送信し、メッセージはコンポーネントを通じてホームページに表示されます。[Vue warn]：インスタンスにプロパティまたはメソッド "messages"が定義されていませんが、レンダリング中に参照されます。
ここで私は、次の3つのコンポーネントを使用している..But私は、次のmessage..onコンソールを参照してくださいメッセージ送るとき：
を[ヴューが警告]：プロパティまたはメソッド「メッセージ」は上で定義されていません インスタンスですが、レンダリング中に参照されます。
[Vue警告]：プロパティまたはメソッド "addMessage"が インスタンスで定義されていませんが、レンダリング中に参照されています。データオプションでは、反応性のある データプロパティを宣言してください。ここ
ブレードページである：
<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
01：ここ<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成分でありますchat-logとchat-composerコンポーネントがメインのHTMLページで参照されているので
<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
}
}
});
実際のVueインスタンスも表示できますか？ –
私はコードを追加しました。一度それを確認してください – Hola
私はちょうど上のすべてのコードを使って新しいプロジェクトを設定しましたが、問題はありませんでした。 –