https://i.stack.imgur.com/QfCDG.png
There seems to be an issue with my saveComment() function in CommentList.vue. It can't find the comments' post_id and causes this error:
CommentList.vue?6c27:107 Uncaught TypeError: Cannot read properties of undefined (reading 'post_id')
at HTMLButtonElement.eval (CommentList.vue?6c27:107)
at HTMLButtonElement.dispatch (jquery.js?1157:5430)
at HTMLButtonElement.elemData.handle (jquery.js?1157:5234)
I'm looking for a way to use props in Vue like data, any suggestions on how I can achieve this?
<div>
{{ comments }}
<button @click="getComments()" class="btn btn-primary">
open comments
</button>
<!-- Button trigger modal -->
<button
@click="openWriteComment()"
type="button"
class="btn btn-primary"
id="openModalBtn"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>
Write Comment
</button>
<!-- Modal -->
<div
class="modal fade"
id="modalBox"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<input type="text" id="commentBody" value="type your comment" />
</div>
<div class="modal-footer">
<button @click="saveComment()" class="btn btn-primary" id="saveBtn">
Save changes
</button>
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
<comment-item
v-for="(comment, index) in commentlist"
:key="index"
:comment="comment"
></comment-item>
</div>
</template>
<script>
import CommentItem from "./CommentItem.vue";
export default {
components: { CommentItem },
data() {
return {
commentlist: [],
};
},
created() {
this.getComments();
},
props: ["post", "loginuser", "comments"],
methods: {
getComments() {
axios
.get("/commentlist")
.then((res) => {
console.log(res.data);
this.commentlist = this.comments;
console.log(this.commentlist);
})
.catch((err) => {
console.log(err);
});
},
openWriteComment() {
$("#openModalBtn").on("click", function () {
$("#modalBox").modal("show");
});
},
saveComment() {
$("#saveBtn").on("click", function () {
console.log(document.getElementById("commentBody").value);
axios
.post("/commentSave/" + this.comments.post_id, {
comment: document.getElementById("commentBody").value,
})
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.log(err);
});
});
},
},
};
</script>