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

以下是错误的屏幕截图：-

以下是ChatApp.vue：-

这是我的联系人列表。vue：-

我甚至不知道问题出在哪里，因为我只是在学习一个教程，而我似乎对vue或js一无所知 我面临这个错误，似乎无法在网上找到任何解决方案 希望这些信息足够。 谁能帮帮我吗

---

-谢谢

您在父项中有语法错误，请更改：

到

---

抱歉，我不明白。请您再解释一点，这会有所帮助。lotmethods被写成methodos，这会阻止vue在侦听器中使用时访问startConversationWith。

<template>
    <div class="chat-app">
    <Conversation :contact="selectedContact" :messages="messages"/>
    <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;      
});

},
   methdos: {
    startConversationWith(contact){
    axios.get(`/conversation/${contact.id}`)
        .then((response) => {
            this.message = response.data;
            this.selectedContact = contact;
})
}
},
    components: {Conversation, ContactsList}

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

<template>
<div class="contacts-list">
    <ul>
        <li v-for="(contact, index) in contacts" :key="contact.id" @click="selectContact(index, contact)" :class="{'selected': index == selected}">
        <div class="avatar">
        <img :src="contact.profile_image" :alt="contact.name">
        </div>
    <div class="contact">
        <p class="name">{{contact.name}}</p>
        <p class="email">{{contact.email}}</p>
    </div>
        </li>
    </ul>
</div>
</template>

<script>
    export default {
        props: {
        contacts: {
        type: Array,
        default: []
}
},
  data(){
    return {
      selected: 0
};
},
   methods: {
    selectContact(index, contact){
    this.selected = index;
this.$emit('selected', contact);
}
}
}

</script>

<style lang="scss" scoped>
.contacts-list {
    flex: 2;
    max-height: 100%;
    height: 600px;
    overflow: scroll;
    border-left: 1px solid #a6a6a6;

    ul {
        list-style-type: none;
        padding-left: 0;

        li {
            display: flex;
            padding: 2px;
            border-bottom: 1px solid #aaaaaa;
            height: 80px;
            position: relative;
            cursor: pointer;

            &.selected {
                background: #dfdfdf;
            }

            span.unread {
                background: #82e0a8;
                color: #fff;
                position: absolute;
                right: 11px;
                top: 20px;
                display: flex;
                font-weight: 700;
                min-width: 20px;
                justify-content: center;
                align-items: center;
                line-height: 20px;
                font-size: 12px;
                padding: 0 4px;
                border-radius: 3px;
            }

            .avatar {
                flex: 1;
                display: flex;
                align-items: center;

                img {
                    width: 35px;
                    border-radius: 50%;
                    margin: 0 auto;
                }
            }

            .contact {
                flex: 3;
                font-size: 10px;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                justify-content: center;

                p {
                    margin: 0;

                    &.name {
                        font-weight: bold;
                    }
                }
            }
        }
    }
}
</style>

methdos: {
     startConversationWith(contact) {...}
}

methods: { //change this
     startConversationWith(contact) {...}
}