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