Laravel 8 结合 Vue.js 模态框提交数据失败，报Cannot read 'post' of undefined错误

错误原因及修复方案 #

1. 核心报错根因：axios未挂载到Vue实例

控制台的TypeError: Cannot read properties of undefined (reading 'post')是因为你代码里调用的this.axios为undefined，axios没有被绑定到Vue实例的全局属性上，两种修复方案可选：

• 方案一：全局挂载axios（适合多组件复用）
  先执行安装命令：

  npm install axios
  

  在项目入口文件main.js中添加挂载代码：

  // Vue2 写法
  import axios from 'axios'
  Vue.prototype.axios = axios
  
  // Vue3 写法
  // import axios from 'axios'
  // const app = createApp(App)
  // app.config.globalProperties.axios = axios
  

• 方案二：组件内单独引入（适合单组件使用）
  在当前Vue组件的script顶部直接导入axios，调用时无需加this.前缀：

  <script>
  import axios from 'axios'
  export default {
    // 原有代码
    methods: {
      addPost() {
        axios.post('http://localhost:8000/api/org/add', this.post)
        // 后续原有逻辑
      }
    }
  }
  </script>
  

2. 接口路径不匹配问题

你当前前端写的请求地址是http://localhost:8000/api/post/add，但Laravel后端路由定义的添加接口前缀是org，正确请求地址应为http://localhost:8000/api/org/add，修改前端请求路径即可。

其他补充修复点

• 你代码中finally回调用到了this.loading，但data中未定义该变量，建议在data的返回值中添加loading: false避免额外告警
• 若后续请求出现跨域错误，可在Laravel项目的config/cors.php中配置允许前端域名访问

内容的提问来源于stack exchange，提问作者TANBHIR HOSSAIN Spring 21