Vue项目中axios调用props报undefined无法读取post_id如何解决

报错根因 #

这个错误和props本身的使用无关，是this指向偏移导致的：
你在saveComment方法里通过jQuery绑定点击事件时使用了普通匿名函数，普通函数内部的this默认指向触发事件的DOM元素（也就是id为saveBtn的按钮），而非Vue实例，因此this.comments为undefined，自然无法读取post_id属性。
另外你已经通过@click绑定了saveComment方法，不需要再在方法内部重复绑定jQuery点击事件，重复绑定会导致后续点击一次执行多次请求的问题。

修复后的saveComment方法

saveComment() {
  // 直接写业务逻辑即可，无需重复绑定点击事件
  const commentContent = document.getElementById("commentBody").value
  // 此处外层的this直接指向Vue实例，可以正常访问props
  axios.post("/commentSave/" + this.comments.post_id, {
    comment: commentContent
  }).then(res => {
    console.log(res.data)
    // 可选操作：保存成功后关闭弹窗、刷新评论列表
    $("#modalBox").modal("hide")
    this.getComments()
  }).catch(err => {
    console.log(err)
  })
},

同理你的openWriteComment方法也是冗余的，你已经在按钮上配置了bootstrap的data-bs-toggle和data-bs-target属性，点击会自动唤起弹窗，不需要额外写jQuery绑定逻辑，可以直接删掉该方法。

Vue props正确使用说明 #

你当前声明props的方式props: ["post", "loginuser", "comments"]本身是可以正常使用的，props本来就支持像data属性一样通过this.xxx直接访问，只要满足两个前提：

1. 父组件调用当前组件时，确实传递了对应的prop值，示例：<CommentList :comments="你的评论对象" :post="文章对象" :loginuser="登录用户对象" />，未传值的prop默认是undefined
2. 访问props时this必须指向Vue实例，不要因为普通函数、定时器、异步回调等场景导致this指向发生改变，如果有指向问题可以提前用变量存Vue实例：const vm = this，后续用vm.xxx访问props即可

如果要更规范的使用props，可以添加类型校验和默认值，避免父组件未传值时报错：

props: {
  post: {
    type: Object,
    default: () => ({})
  },
  loginuser: {
    type: Object,
    default: () => ({})
  },
  comments: {
    type: Object,
    default: () => ({})
  }
}

其他注意点 #

你当前的getComments方法逻辑存在问题：已经调用接口获取了评论列表数据res.data，但最终却给commentlist赋值为this.comments，完全没用上接口返回的结果，需要你自行核对此处逻辑是否符合需求。

内容的提问来源于stack exchange，提问作者zzxczxczaa