using v-for with multiple keys [closed] - vue.js

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 months ago.
Improve this question
So I am going to be honest I am NOT sure if using multiple keys is the right solution but in my head it is what makes sense. Here is the task at hand.
I have 3 objects I am showing in a v-for statement:
The bottom item (CHILD OF 1) should be located under PARENT 1. Now, in my code, I have the following
<div class="text-white" v-for="comment in comments" :key="comment.id">
Now, there is another field in the object called comment.parent_id That relates back to the original comment.id
How would I go about properly sorting this so that I can format the comments accordingly. (side note not that it matters, but, ill be indenting the child comment which is why this is important).
Thanks!

Answer 1

Solution for only one depth
I would organize the data differently and use a different approach.
The data would be more coherent if you have an object list with your parent comments and your parent object has a child comment object list.
Example:
comments = [{
id: 1,
username: "John SMITH",
timestamp: "9999-12-31 23:59:59.999999",
text: "This is a parent comment",
commentChild: [{
id: 2,
username: "Angela SMITH",
timestamp: "9999-12-31 23:59:59.999999",
text: "This is a Child comment",
},]
},]
With this it is easy to make a first for loop to browse your parents and within it, a for loop to browse the children, if there are any.
<template>
<div>
<template v-for="comment in comments" :key="comment.id">
<div>Your parent comment data</div>
<template v-for="commentChild in comment.commentChild" :key="commentChild.id">
<div>Your child comment data</div>
</template>
</template>
</div>
</template>
Solution for infinite depth
To handle an unknown depth, you must have a recursive component and a parent component that will initiate the first call.
This is what it can do:
Comment Interface
interface Comment {
id: number;
comments?: Comment[];
// And all data you want
}
Component Parent (initial call):
<template>
//Only here for call the recursive component
// Take your list of comments
<MyCommentsRecursiveComponent :comments="comments"></Test>
</template>
MyCommentsRecursiveComponent:
<script setup lang="ts">
defineProps<{ comments: Comment[] }>();
</script>
<template>
<div>
<template v-for="(actualComment, index) in comments">
<p>{{ actualComment.id }}</p>
<div>
// Component call himself / Recursive
<MyCommentsRecursiveComponent
v-if="actualComment.comments"
:comments="actualComment.comments"
></MyCommentsRecursiveComponent>
</div>
</template>
</div>
</template>