** Check out the Screenshot Below:-** https://i.sstatic.net/u2UeW.png
Take a look at 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>
Let's Dive into 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>
Lastly, Let's Take a Look at 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>
I've double-checked the codes and couldn't find any errors or mistakes, So, the issue might be something minor (apologies for that).
I've been stuck on this problem for quite some time now, I trust this information will help in resolving the error
I was simply following a tutorial and got stuck, Any assistance would be greatly appreciated
-Thank You