In my setup, there are three components where one acts as the parent to the others. I am attempting to pass an object named talk between sibling components by emitting it through an event from FollowedBrowser to LeftBar, and then passing it via props from LeftBar to the TalksList component. Subsequently, another event is emitted by TalksList, listened to by LeftBar, which then redefines the talk object as an empty object.
The main parent component in control here is LeftBar.
<template>
<v-navigation-drawer width="25%" permanent clipped app light>
<talks-list v-if="inRoute('messages')" :talk="talk" @talkAdded="talkAdded()"/>
<template v-if="inRoute('messages')" v-slot:prepend>
<followed-browser @newTalk="addTalk($event)"/>
</template>
</v-navigation-drawer>
</template>
<script>
import FollowedBrowser from "./FollowedBrowser";
import TalksList from "./TalksList";
import { mapGetters } from "vuex";
export default {
data(){
return {
talk: {}
}
},
components: {
FollowedBrowser,
TalksList
},
methods: {
addTalk(talk){
this.talk = talk;
},
talkAdded(){
this.talk = {};
}
}
}
</script>
Now, let's take a look at the two child components:
TalksList.vue
<template> <v-container class="my-0 px-5"> <v-list flat> <v-list-item-group class="my-0"> <div class="ma-0 pa-0" v-for="(talk, index) in talks" :key="index"> <v-divider v-if="talk.divider"></v-divider> <v-list-item v-else class="px-2" style="cursor: pointer"> <template> <v-list-item-avatar> <v-img :src="correctedImageUrl(talk.recipient)"></v-img> </v-list-item-avatar> ... (content truncated for brevity) <p>}</p> <p>When calling the <code>newTalkmethod inside theFollowedBrowsercomponent, thenewTalkevent is triggered. However, following this action, the screen seems to freeze as if caught in an infinite loop. I have excluded some irrelevant code snippets for clarity and assistance would be greatly appreciated!Thank you in advance.