The function "initiateChat" is being called in the render method, but is not defined on the instance

Check Out This Error Screenshot:- https://i.sstatic.net/27o22.png

This is ChatApp.vue Code Snippet:-

<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>

Here's My ContactsList.vue Code Section:-

<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>

I'm running into an issue while trying to follow a tutorial related to Vue.js development. I have limited knowledge about the topic and can't seem to find a solution online. Any assistance would be greatly appreciated. Thank you for your help.

-ThankYou

Answer №1

Your parent contains a syntax error, please revise:

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

Corrected version:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Checking for related rows in Laravel Fluent or Eloquent - A necessary step for efficient data

I'm currently faced with a basic issue that requires a solid solution. In my application, each post can have zero or multiple comments attached to it. I am grappling with how to use Fluent or Eloquent to specifically fetch posts that have comments ass ...

React: Applying the active class to mapped elements

I have a component that iterates over an array to generate 10 navigation items. I want to implement an onClick method that will add an active class to the clicked item. Are there any best practices using Hooks or the newer React patterns for achieving this ...

What is the most effective way to add HTML from a dynamically loaded document using AJAX?

I am attempting to attach the information from a .html file to the body of my main webpage. Essentially, I am striving to create a reusable section of html that can be loaded into any page with a basic JavaScript function. Below is the content of my navig ...

How can I color the first, second, and third buttons when the third button is clicked? And how can I color all the buttons when the fourth button is clicked?

I am trying to achieve a task with 4 buttons. When the third button is clicked, I want the first, second, and third buttons to change color. Similarly, when the fourth button is clicked, I want all buttons to change color. Additionally, I need to save a va ...

How can I extract the id of a clicked item and pass it to a different page with Jquery?

Facing an issue where the attribute value of a clicked href tag is not retained after browser redirection. Initially, when clicking on the href tag, the value is displayed correctly. However, upon being redirected to the peoplegallery_album, the id becomes ...

Redirecting clients on form submission from the client side

In my cshtml page, I have a script that calls a controller method via jQuery on form submission. It passes data to the method using the values from a datePicker control. Here's an example of the script: $('form').submit(function () { v ...

Sending an Ajax call to a PHP script without including any data in the POST

Having recently started delving into javascript, I've encountered an issue with performing an ajax POST to php. I'm attempting to send javascript variables over to php through an ajax POST, but it seems to be malfunctioning. The ajax post goes ...

Oops! Vue.js is throwing a compile error involving unused variables and undefined variables

I'm currently working on developing a new Vue.js component, but I'm encountering an error when launching the application. The specific error message is displayed below: https://i.sstatic.net/0MQxl.png <template> <div class="hello" ...

"Troubleshooting: Angular 1.x component not displaying templateUrl content in the DOM

This is how I have set up my component: // app/my-component/my-component.js app.component('myComponent', { bindings: { bindingA: '=', bindingB: '=' }, templateUrl: 'app/my-component/my-compone ...

Utilizing the parameter "error" to distinguish unsuccessful tasks within async.mapLimit

In my coding process, I am using async.mapLimit to implement some parallel operations on an array with a limit of 10: async.mapLimit(files, 10, function(file, callback) { ... etc... }, function(error, files) { ... etc.. }); Within the main opera ...

What is the best way to delete a nested child object using a specific identification number?

Here is the current json structure: $scope.dataList = [{ CompanyName: null, Location: null, Client: [{ ClientId: 0, ClientName: null, Projects:{ Id: 0, Name: null, } }] }]; I'm attempting to remo ...

Populating the Join Table with Information

I have a scenario involving two models, Contact and Message, with a join model named ContactMessage. Contact.belongsToMany(models.Message, { through: 'ContactMessage' }) Message.belongsToMany(models.Contact, { through: 'ContactMessage& ...

Firebase functions are giving me a headache with this error message: "TypeError: elements.get is not

Encountering the following error log while executing a firebase function to fetch documents and values from the recentPosts array field. Error: Unknown error status: Error: Unknown error status: TypeError: elements.get is not a function at new HttpsEr ...

Creating a Vue Canvas with Endless Grid Dots and a Dynamic Panning Feature

I'm currently focused on integrating a panning system into the canvas of my Vue application. Although I have successfully implemented the panning system, I am encountering difficulties in efficiently rendering an infinite grid of dots. Below is the c ...

Filtering JSON data in AngularJS is simple and effective

I am working with JSON data and I want to display it filtered by genre. The solution provided in the previous question How to filter JSON-Data with AngularJs? did not work for me. Here is myapp.js: var myApp = angular.module('myApp', []); myAp ...

Nuxt was unable to locate the module @nuxt/ufo in the /app/client directory. There were no modifications performed

After restarting my docker image running a nuxt application today, I encountered a new error that I hadn't seen before. It is showing the following message: ERROR Cannot locate module '@nuxt/ufo' in '/app/client' ...

Experimental testing of event handlers using Queue::fake()

In my Laravel 5.5 project, I have a model named Product. The Product model includes a property called dispatchesEvents, which is defined as follows: /** * The event map for the model. * * @var array */ protected $dispatchesEvents = [ 'created ...

Creating a personalized v-for loop with v-if to apply a specific class to a div element

How can I correctly utilize v-if when using v-for inside? I am aiming to implement a condition where if the index is 0 or it's the first data, then add an active class. <div class="item active" v-for="(item, key, index) in slideItem" :key="item._ ...

What is the best method for choosing all options in a select box in IE without experiencing the scrolling effect?

Here's the scenario: I have a select element with multiple options and a checkbox that allows users to select/deselect all options. The issue arises in Internet Explorer, where selecting all options using code causes the entire select box to scroll un ...

Is it possible to save jQuery plugin initialization settings for future use?

Is it possible to save a default set of settings for a lightbox jQuery plugin, including options and callback functions, in a variable or array that can be referenced later in different contexts with varying configurations? For example, could I initially ...