Currently, I am retrieving comments from an API and attempting to modify a specific comment from the list.
Upon clicking the edit button, a text area appears within the comment box along with a save button, functioning as expected.
The issue arises when clicking the edit button, as the edit text area is applied to all comment boxes instead of just the selected one.
<div>
<i class="fas fa-pen text-action text-success mr-3" @click="showComment(comment.id)" v-if="user == comment.user_id" v-b-tooltip.hover title="edit"></i>
<i class="fas fa-times-circle text-danger" v-b-tooltip.hover title="delete" v-if="!editing" v-show="user == comment.user_id"></i>
<i class="fa fa-times text-action text-danger mr-3" v-if="editing" @click="editing = false" v-b-tooltip.hover title="cancel editing"></i>
</div>
</div>
<div v-if="editing">
<textarea class="form-control" v-model="commentEdited" :id="comment.id" :placeholder="comment.body"></textarea>
<button class="btn btn-xs btn-success" @click="editComment(comment)">save</button>
</div>
The showComment method:
showComment(comment_id) {
console.log("clicked" + comment_id);
for (let i = 0; i < this.comments.length; i++) {
if (this.comments[i].id == comment_id) {
this.comment.body = this.comments[i].body;
this.comment.id = this.comments[i].id;
this.editing = true;
}
}
},
The editing boolean variable controls the editing state.
It's essential that upon clicking edit, only the textarea for the current comment opens, not all comments. I'm struggling to find a solution to this problem. Any assistance would be greatly appreciated.