After retrieving an object from an API resource and storing it in a property, I encountered an issue where the children components were unable to access the object inside the created method. This prevented me from assigning the values of the object to my data properties as arrays and strings.
Upon inspecting the props from the child component, I observed that my items object was present within it.
"This is the parent component"
<template>
<v-container grid-list-xl fill-height>
<v-layout row wrap>
<v-flex xs6 offset-xs3>
<message-box :items="source" v-if="source.length > 0"></message-box>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import MessageBox from './MessageBox'
export default {
components:{MessageBox},
data() {
return {
room_id: 1,
source: {},
};
},
created(){
var app = this;
axios.get(`/api/room/${app.room_id}/message`)
.then(res => app.source = res.data.data);
}
};
</script>
"This is the child component"
<template>
<div>
<beautiful-chat
:participants="participants"
:titleImageUrl="titleImageUrl"
:onMessageWasSent="onMessageWasSent"
:messageList="messageList.messageList"
:newMessagesCount="newMessagesCount"
:isOpen="isChatOpen"
:close="closeChat"
:icons="icons"
:open="openChat"
:showEmoji="true"
:showFile="true"
:showTypingIndicator="showTypingIndicator"
:colors="colors"
:alwaysScrollToBottom="alwaysScrollToBottom"
:messageStyling="messageStyling"
@onType="handleOnType"
@edit="editMessage"
/>
</div>
</template>
<script>
import CloseIcon from "vue-beautiful-chat/src/assets/close-icon.png";
import OpenIcon from "vue-beautiful-chat/src/assets/logo-no-bg.svg";
import FileIcon from "vue-beautiful-chat/src/assets/file.svg";
import CloseIconSvg from "vue-beautiful-chat/src/assets/close.svg";
export default {
props: ['items'],
data() {
return {
room_id: 1,
participants:[],
messageList: [],
limit: 7,
busy: false,
auth_uid: User.id(),
titleImageUrl:
"https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png",
newMessagesCount: 0,
isChatOpen: false,
alwaysScrollToBottom: false,
messageStyling: true,
showTypingIndicator: "",
icons: {
open: {
img: OpenIcon,
name: "default"
},
close: {
img: CloseIcon,
name: "default"
},
file: {
img: FileIcon,
name: "default"
},
closeSvg: {
img: CloseIconSvg,
name: "default"
}
},
colors: {
header: {
bg: "#4e8cff",
text: "#ffffff"
},
launcher: {
bg: "#4e8cff"
},
messageList: {
bg: "#ffffff"
},
sentMessage: {
bg: "#4e8cff",
text: "#ffffff"
},
receivedMessage: {
bg: "#eaeaea",
text: "#222222"
},
userInput: {
bg: "#f4f7f9",
text: "#565867"
}
}
};
},
methods: {
sendMessage(text) {
if (text.length > 0) {
this.newMessagesCount = this.isChatOpen ? this.newMessagesCount : this.newMessagesCount + 1;
this.onMessageWasSent({
author: "support",
type: "text",
data: { text }
});
axios
.post(`/api/room/${this.room_id}/message`, { body: text })
.then(res => console.log("message sent"));
}
},
onMessageWasSent(message) {
this.messageList = [...this.messageList, message];
},
openChat() {
this.isChatOpen = true;
this.newMessagesCount = 0;
},
closeChat() {
this.isChatOpen = false;
},
handleScrollToTop() {
},
handleOnType() {
console.log("Emit typing event");
},
editMessage(message) {
const m = this.messageList.find(m => m.id === message.id);
m.isEdited = true;
m.data.text = message.data.text;
},
},
created(){
Array.prototype.forEach.call(this.$props.items, child => {
this.participants = child.participants;
this.messageList = child.body;
});
},
computed:{
itemarr(){
return this.$props.items
}
}
};
</script>
"The console error is
TypeError: Array.prototype.forEach called on null or undefined"The output of my items object is {__ob__: Observer}"