Laravel 5.1 和 Vue.js - 21678 Uncaught (in promise) TypeError: Cannot read property 'data' of null

Posted 2023-03-14

【中文标题】Laravel 5.1 和 Vue.js - 21678 Uncaught (in promise) TypeError: Cannot read property \'data\' of null

【英文标题】：Laravel 5.1 and Vue.js - 21678 Uncaught (in promise) TypeError: Cannot read property 'data' of nullLaravel 5.1 和 Vue.js - 21678 Uncaught (in promise) TypeError: Cannot read property 'data' of null

【发布时间】：2017-03-31 03:45:52

【问题描述】：

我正在使用 Laravel 和 Vue.js 创建一个应用程序，最初我的应用程序运行良好，在创建了另一个组件后，它遵循与其他组件相同的过程，数据停止显示在表中，我开始

fetchUser: function(page) 
            var _this2 = this;
            this.$http.get('http://localhost:8000/api/v1/users?page='+page).then((response) => 
                _this2.$set('users', response.data.data);

                _this2.$set('pagination', response.data);
            , (response) => 
                console.log("Ocorreu um erro na operação");
            );
        ,

得到以下错误“main.js: 21678 Uncaught (in promise) TypeError: Can not read property 'data' of null”，其中一切都表明它在 main.js 文件中的第 21678 行。如果有人知道是什么发生请帮助我。接下来我介绍导致错误的函数的代码。

当我运行“console.log (response)”时，结果如下图所示： console.log(response)

请帮助我，因为我想继续使用 Laravel 和 Vue.js 进行动态处理。

【问题讨论】：

响应数据作为正文返回，而不是作为数据返回。你能显示生成数据的后端代码吗？

【参考方案1】：

不知道你的情况为什么会这样，但答案很清楚： 您的数据不在response.data 中，而是在response.body 中

请确保您在 Laravel 控制器中使用 JSON 响应：

return response()->json([
    // your data
]);

那么我认为它应该是内部数据，因为它应该符合惯例。

【讨论】：

已经尝试过这样做但是返回是一样的，即'response.data'只是返回null，即使使用JSON Response。

【参考方案2】：

使用response.json() 或JSON.parse(response.body) 作为您的data。

正如 Marek 的回答中所述，响应文本存储在 response.body 中。要在服务器和前端之间同步其结构，请使用 json。但是仅让服务器以 json 格式响应是不够的，因为对于您的应用程序来说它只是一些文本（尽管是 json 格式）。要使 data.data 工作，您可以使用 vue-resource 的 .json() 来将文本转换为 javascript 对象，或者使用原生的 JSON 对象来做同样的事情。