I'm faced with a challenge involving an array of posts with comments, each post having an input for creating a new comment. The posts array contains the id of each post as a prop, but I'm unsure how to select the specific post for which I want to create a comment. I need this specific post id to link the comment to the correct post in my database, but I'm struggling to figure out how to identify that id.
These are examples of the structure:
{"userId": 1, "id": 3, "title": "ea molestias", "body": "et iusto sed quo" } <v-row class="mb-6" justify="center">
<v-col
xs="12"
sm="12"
md="10"
lg="8"
v-for="post in posts"
v-bind:key="post.id"
>
<v-card dark>
<v-card-title class="c-t">Title: {{ post.title }}</v-card-title>
<v-card-subtitle class="text-left c-t"
>User: {{ post.id }}</v-card-subtitle
>
<v-card-text class="text-left"
>Description: {{ post.description }}</v-card-text
>
<v-card-actions>
<v-btn text color="warning accent-4">
Edit
</v-btn>
<v-btn text color="red accent-4">
Delete
</v-btn>
</v-card-actions>
<v-card-text>
<v-divider class="mx-4"></v-divider>
<v-card-subtitle class="text-left com-t">Comments</v-card-subtitle>
<!-- Comments loop -->
<div class="conditional" v-if="post.comments != null">
<v-card
class="mb-2"
v-for="comment in post.comments"
v-bind:key="comment.id"
>
<v-card-title class="text-left comment"
>User {{ comment.name }}</v-card-title
>
<v-card-subtitle class="text-left comment">{{
comment.email
}}</v-card-subtitle>
<v-card-text class="text-left comment">{{
comment.body
}}</v-card-text>
</v-card>
</div>
</v-card-text>
<!-- Search -->
<v-form ref="form" lazy-validation>
<v-row class="mb-6" justify="center" align="center">
<v-col xs="6" sm="8" md="8" lg="8">
<v-text-field
v-model="comment"
label="Comment"
class="ml-2"
></v-text-field>
</v-col>
<v-col xs="2" sm="2" md="2" lg="2">
<v-btn color="success" @click="createComment">Send</v-btn>
</v-col>
</v-row>
</v-form>
</v-card>
</v-col>
</v-row>
In my scripting section, I'm using v-model to capture the comment and emit an event to pass it to the parent component for the post http request. However, I'm stuck on how to retrieve the current post's id when the "Create comment" button is clicked.
Feel free to check out my code on Github: https://github.com/roninMo/vueRestfulApi/blob/master/src/components/Posts.vue