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

Question

I am creating an application using Laravel and Vue.js, initially my application was working perfectly, after creating one more component, which followed the same procedures as the others, the data stopped being presented in the table, and I started to

 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"); }); }, 

get the following error "main.js: 21678 Uncaught (in promise) TypeError: Can not read property 'data' of null" where everything indicates that it is in main.js file on line 21678. If anyone knows what is happening please help me. Next I present the code of the function responsible for the error.

And when I run 'console.log (response)' the result is as shown in the following image: console.log(response)

Please help me because I want to continue with this dynamic using Laravel and Vue.js.

Answer 1

Not sure why it is like that in your case, but the answer is quite clear: Your data is not in response.data but in response.body

Please make sure you are using JSON responses in your Laravel controller:

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

then I think it would be inside data as it should be to go in line with convention.

Answer 2

Use response.json() or JSON.parse(response.body) as your data .

As is stated in Marek's answer, the response text is stored in response.body . To sync its structure between server and front end, use json. But only making the server to respond in json format is not enough, because to your app its just some text (though in json format). To make data.data work, you can use vue-resource's .json() to convert the text to a javascript object , or use the native JSON object to do the same.