[Vue warn]: сообщения свойств или методов не определены в экземпляре, но на них ссылаются во время рендеринга.

Я тестирую VueJs для целей тестирования, когда пользователь отправит какое-то сообщение, и сообщение будет отображаться на домашней странице через компоненты.

Здесь я использовал три компонента .. Но когда я отправляю сообщение, я вижу следующее сообщение ... на консоли:

[Предупреждение Vue]: свойство или метод «messages» не определены в экземпляре, но на них ссылаются во время рендеринга.

[Предупреждение Vue]: свойство или метод «addMessage» не определены в экземпляре, но используются во время рендеринга. Обязательно объявите реактивные свойства данных в параметре данных.

Вот страница лезвия:

<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
        }
    }
});

vue-component laravel-5.4 laravel-5.3
person Hola    schedule 02.02.2017    source источник
comment
Можете ли вы также показать свой реальный экземпляр Vue?   -  person Rwd    schedule 02.02.2017
comment
Я добавил с помощью кода .. проверьте его один раз, пожалуйста   -  person Hola    schedule 04.02.2017
comment
Я только что создал новый проект со всем кодом, приведенным выше, и не получил никаких проблем.   -  person Rwd    schedule 05.02.2017

Ответы (1)


arrow_upward
1
arrow_downward

Поскольку компоненты chat-log и chat-composer упоминаются на главной html-странице, данные, которые вы отправляете им, должны находиться внутри основного экземпляра Vue.

messages, который вы отправляете в качестве опоры, а также addMessage метод, который вы хотите быть слушателем, который будет уведомлять основной экземпляр при отправке сообщений, должен находиться внутри основного экземпляра vue js (root)

new Vue({
//your code
data:{
 messages:[]//populate it with some data
},
methods:{
  addMessage(message){
   //this will get called when chat composer calls sendMessage
  }
}
})
person Cristi Jora    schedule 02.02.2017