属性或方法“消息”未在实例上定义，但在渲染期间引用

Posted 2023-02-23

【中文标题】属性或方法“消息”未在实例上定义，但在渲染期间引用

【英文标题】：Property or method "message" is not defined on the instance but referenced during render

【发布时间】：2020-09-08 10:01:20

【问题描述】：

** 这是截图：-**

这是 MessageComposer.vue：-

<template>
    <div class="composer">
    <textarea v-model="message" @keydown.enter="send" placeholder="Message..."></textarea>
    </div>
</template>


<script>
    export default 
    data() 
        return 
        messsage: ''                
            ;
          ,
        methods: 
            send(e) 
                e.preventDefault();
                if (this.message == '') 
                return;
    

    this.$emit('send', this.message);
    this.message = '';


   

</script>


<style lang="scss" scoped>
.composer textarea 
    width: 96%;
    margin: 10px;
    resize: none;
    border-radius: 3px;
    border: 1px solid lightgray;
    padding: 6px;

</style>

这里是 Conversation.vue：-

<template>
<div class="conversation">
    <h1>contact ? contact.name : 'Select a Contact'</h1>
    <MessageFeed :contact="contact" :messages="messages"/>
    <MessageComposer @send="sendMessage"/>




</div>
</template>

<script>
    import MessageFeed from './MessageFeed.vue';
    import MessageComposer from './MessageComposer.vue';

    export default 
        props: 
        contact: 
        type: Object,
        default: null
,
        messages: 
            type: Array,
            default: []

,
    methods: 
        sendMessage(text)
            if (!this.contact) 
            return;

        axios.post('/conversation/send', 
        contact_id: this.contact.id,
        text: text
    ).then((response) => 
        this.$emit('new', response.data);
) 


,

components: MessageFeed, MessageComposer



</script>


<style lang="scss" scoped>
.conversation 
    flex: 5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    h1 
        font-size: 20px;
        padding: 10px;
        margin: 0;
        border-bottom: 1px dashed lightgray;
    

</style>

这是 ChatApp.vue：-

<template>
    <div class="chat-app">
    <Conversation :contact="selectedContact" :messages="messages" @new="saveNewMessage"/>
    <ContactsList :contacts="contacts" @selected="startConversationWith"/>
     </div>
</template>

<script>
    import Conversation from './Conversation.vue';
    import ContactsList from './ContactsList.vue';
    export default 
    props: 
    user:
        type: Object,
        required: true

,
        data() 
            return
        selectedContact: null,
        messages: [],
        contacts: []
;

        ,
    mounted() 

        axios.get('/contacts')
              .then((response) => 

        this.contacts = response.data;      
);

,
   methods: 
    startConversationWith(contact)
    axios.get(`/conversation/$contact.id`)
        .then((response) => 
            this.message = response.data;
            this.selectedContact = contact;
)
,
    saveNewMessage(text)
        this.messages.push(text);

,
    components: Conversation, ContactsList

    
</script>
<style lang="scss" scoped>
.chat-app 
    display: flex;

</style>

我似乎在代码中找不到任何错误或错误， 这个错误可能真的很愚蠢（对此感到抱歉）。

从昨天开始我就一直坚持这个， 我希望这些信息足以解决这个错误

我只是在学习一个教程，请帮助

-谢谢你

【参考方案1】：

在你的MessageComposer.vue中，返回数据

return 
    messsage: ''  // spelling error. Should be message
,

【讨论】：

无论如何感谢您的帮助

是的，我刚刚意识到，我可以按 Enter 键并发送消息，但同时“请求失败状态代码 500”似乎会创建一个新问题 - 谢谢