I am currently working with a list component and a looping item component structured as follows:
RoomList.vue
<template>
<ul id="TheRoomList">
<button
id="TheCreateRoomButton"
@click="createRoom()"
:disabled="createRoomIsDisabled"
>
<span v-if="createRoomIsDisabled">Loading...</span>
<span v-else>Create Room</span>
</button>
<div v-if="rooms.length === 0">Loading...</div>
<div v-else>
<room-item v-for="room in rooms" :key="room.id" :room="room" />
</div>
</ul>
</template>
<script>
import RoomItem from "./RoomItem.vue";
export default {
components: { RoomItem },
data: () => ({
createRoomIsDisabled: false,
rooms: [],
}),
methods: {
async createRoom() {
this.createRoomIsDisabled = true;
const newRoom = await this.$db.collection("rooms").add({
creator: this.$auth.currentUser.email,
created_at: new Date(),
});
this.$router.push(newRoom.id);
},
},
created() {
this.$bind(
"rooms",
this.$db.collection("rooms").orderBy("created_at", "desc")
);
},
};
</script>
RoomItem.vue
<template>
<li id="Room" :data-id="room.id">
<a :href="room.id" target="_blank" style="font-family: monospace">{{
room.id.toUpperCase()
}}</a>
<button v-if="room.creator === $user.email" @click="deleteRoom()">
Delete
</button>
</li>
</template>
<script>
export default {
props: {
room: Object,
},
methods: {
deleteRoom() {
this.$db.collection("rooms").doc(this.room.id).delete();
},
},
};
</script>
What are the implications of placing methods inside a looping component? Could it impact performance or app size?
If I choose to emit events to the parent component instead, it may result in a bloated parent component with methods. In that case, what would be the best approach?