在 vue axios 上使用 props？ 有未定义的错误。 我如何在 axios 上使用道具？

Question

我的评论对象的状态很好，但我的 saveComment() 函数找不到评论的 post_id 并出错 ->>

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)

我如何在 vue 中使用道具？ 我想使用像数据这样的道具..

  <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>```

Answer 1

我想我发现了你的错误。

你的错误：

  saveComment() {
      $("#saveBtn").on("click", function () { // This callback is a regular function
        console.log(document.getElementById("commentBody").value);
        axios
            // when you get here 'this' context from Vue is lost
            // "this.comments" doesn't exist in the context of this function.
          .post("/commentSave/" + this.comments.post_id, {
            comment: document.getElementById("commentBody").value,
          })

解决方案：

saveComment() {
      $('#saveBtn').on('click',  () => { // convert this to arrow function.
        console.log(document.getElementById('commentBody').value)
        axios
          .post('/commentSave/' + this.comments.post_id, {
            comment: document.getElementById('commentBody').value
          })