1👍
✅
The line let id=this.array.id;
is trying to get the id
property of the array itself, not the ID of an entry in the array.
Based on the YouTube tutorial you are following, when you attach your comment()
method in the v-for
loop, you should pass the array entry it relates to in as a parameter. When this method is invoked, it should set the ID that is being edited, load the existing comment (if it exists) and open the modal dialog to edit the comment.
<script>
export default{
//...
methods: {
editComment(userDetails) {
this.textComment = userDetails.comment || ''; // load current comment
this.activeUserDetailsId = userDetails.id; // set ID being edited
$('#commentModal').modal('show'); // show modal dialog
},
saveComment() {
let id = this.activeUserDetailsId;
if (!id) {
alert('Failed to save comment - invalid state');
return;
}
db.collection("form")
.doc(this.activeUserDetailsId)
.update({
comment: this.textComment
})
.then(function() {
$('#commentModal').modal('hide');
console.log("Document successfully written!");
})
.catch(function(error) {
// TODO: Show error to user
console.error("Error writing document: ", error);
});
}
}
};
I have edited, proofed and reworked the code you provided into this updated file. It was written free hand so let me know if there are any bugs.
A summary of the changes:
- Renamed variables to make their use clear
- Added
editComment(userDetails)
andsaveComment()
event handlers - Fixed usage of
formatTime
filter from your other question - Added basic handling of no results
- Fixed indentation
- Fixed incorrect placement of your modal
div
– shouldn’t have been insidev-for
loop
Source:stackexchange.com