When it comes to communication between components, my structure looks something like this:
<div id=chat-box>
<div class="wrapper">
<div>
<chat-header></chat-header>
<message-container :chat="chat"></message-container>
<chat-compose @clicked="onClickChild"></chat-compose>
</div>
</div>
The parent component:
methods: {
onClickChild (value) {
console.log('in top parent');
this.chat = value;
},
The first child component:
methods: {
startChat: function(event) {
this.$emit('clicked', new chat({
type: 'user',
message: this.input_value,
button: 'user',
metaInfo: 'user',
isBot: false,
}))
},
},
The second child component:
export default { name: 'messageContainer', props: ['chat'],
data: function() {
return {
chatSession: [],
}
},
method : {
updateData : function() {
console.log('called updatedata');
}
},
created: function () {
console.log(this.chat)
},
mounted: function () {
console.log(this.chat)
},
updated: function() {
console.log(this.chat)
}
}
After clicking on the child method and emitting it to the parent for an update, the message-container component does not reflect the updated value. Despite attempting to use created, mounted, and updated methods to achieve this, they only execute once during app initialization and do not trigger again upon data changes.
In summary, there are three components in total – one parent and two children. The issue arises when one child updates the chat object, emits it to the parent, and the parent passes the same updated child to another child which fails to re-render or receive the updated value. Any guidance on a better approach would be greatly appreciated.