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

. Я тестирую VueJs для целей тестирования, где пользователь отправит какое-то сообщение, и сообщение будет отправлено на главную страницу через компоненты.[Vue warn]: свойства или методы «сообщения» не определены в экземпляре, но указаны во время рендера.

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

[Вьет предупреждают]: Свойство или метод «сообщения» не определен на экземпляр, но ссылающийся во время рендера.

[Vue warn]: свойство или метод «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 (главный файл вя 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 
     } 
    } 
});

источник

2017-02-02 Hola

Можете ли вы показать свой фактический экземпляр Vue? –

Я добавил с кодом..посмотрю его один раз – Hola

Я только что создал новый проект со всем кодом сверху и не получил никаких проблем. –

chat-log С и chat-composer компонентов упоминаются в основном HTML-странице, отправляемые вами данные для них должны быть внутри основным экземпляр Вьет.

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

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

источник

2017-02-02 17:04:05

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

ответ

Смежные вопросы