Argument 1 passed to Symfony\Component\HttpFoundation\Response::setContent() with Axios Vue and Laravel 7
You are returning an Eloquent Builder object from this route:
Route::get('contacts', function () {
return Contact::latest()->orderBy('created_at', 'desc');
});
You can not return this, the framework does not know what to do with this object, you should be executing the query and returning the result:
return Contact::latest()->get();
Then this Collection will get serialized to JSON.
Erik James Robles
I'm an American Citizen living in Mexico City working as an English teacher and quality coordinator. My dream is to become a front-end developer in Vancouver B.C. Canada and utilize my skills in teaching languages for a company that cares about second language learning. I am ICELT certified (In service certificate of English Language teaching). I am new to coding but comfortable with it as I have dabbled in it before many years ago. I enjoy working in html, CSS and am learning JavaScript at the moment.
Updated on January 18, 2022Comments
-
Erik James Robles over 2 years
I am using Laravel 7 with Vue and Axios and I have run across this error but cannot seem to find out why I am getting it. I am using api routes in my Laravel app for contacts, No Controller and One Contacts Model. I have one vue component named Contacts.vue. When trying to fetch the data for the first time, I am met with a 500 internal server error and when I try to visit the route in question, api/contacts, I am met with the following error:
Argument 1 passed to Symfony\Component\HttpFoundation\Response::setContent() must be of the type string or null, object given, called in C:\laragon\www\contactstore\vendor\laravel\framework\src\Illuminate\Http\Response.php on line 65
To me, as a person new to Laravel, I am not sure how to trace down the problem. Unless there have been changes to axios compared to the way I am trying to use it, I haven't the slightest clue. So, Any help would be greatly appreciated. Thank you.
Here is the Contact.vue
<template> <div> <h1>Contacts</h1> <form action="#" @submit.prevent="edit ? updateContact(contact.id) : createContact()" > <div class="form-group"> <label for="">Name</label> <input v-model="contact.name" type="text" name="name" class="form-control" placeholder="Enter Contact Name" /> </div> <div class="form-group"> <label for="">Email</label> <input v-model="contact.email" type="email" name="email" class="form-control" placeholder="Enter Contact Email" /> </div> <div class="form-group"> <label for="">Phone</label> <input v-model="contact.name" type="text" name="phone" class="form-control" placeholder="Enter Contact Phone Number" /> </div> <div class="form-group"> <button v-show="!edit" type="submit" class="btn btn-primary"> New Contact </button> <button v-show="edit" type="submit" class="btn btn-secondary"> Update Contact </button> </div> </form> </div> </template> <script> export default { data: function () { return { edit: false, list: [], contact: { id: "", name: "", email: "", phone: "", }, }; }, mounted: function () { console.log("Contacts Component Loaded..."); this.fetchContactList(); }, methods: { fetchContactList: function () { console.log("Fetching contacts..."); axios .get("api/contacts") .then((response) => { console.log(response.data); this.list = response.data; }) .catch((error) => { console.log(error); }); }, createContact: function () { console.log("Creating Contact... "); let self = this; let params = Object.assign({}, self.contact); axios .post("api/contact/store", params) .then(function () { self.contact.name = ""; self.contact.email = ""; self.contact.phone = ""; self.edit = false; self.fetchContactList(); }) .catch(function (error) { console.log(error); }); }, updateContact: function (id) { console.log("Updating Contact... " + id); }, }, }; </script>
My Contact model in the Models folder under App
<?php namespace App\Models; use Illuminate\Database\Eloquent\Model; class Contact extends Model { // } My api.php for the routes <?php use App\Models\Contact; use Illuminate\Http\Request; use Illuminate\Support\Facades\Route; Route::get('contacts', function () { return Contact::latest()->orderBy('created_at', 'desc'); }); Route::get('contact/{id}', function ($id) { return Contact::findOrFail($id); }); Route::post('contact/store', function (Request $request) { return Contact::create([ 'name' => $request->input('name'), 'email' => $request->input('email'), 'phone' => $request->input('phone'), ]); }); Route::patch('contact/{id}', function (Request $request, $id) { Contact::findOrFail($id)->update([ 'name' => $request->input('name'), 'email' => $request->input('email'), 'phone' => $request->input('phone'), ]); }); Route::delete('contact/{id}', function ($id) { return Contact::destroy($id); }); Route::middleware('auth:api')->get('/user', function (Request $request) { return $request->user(); });
and I am calling it all from within the default welcome.blade.php with
<contacts></contacts>
Again, if you can help me, I would certainly appreciate it. Thank you in advance.
-
Erik James Robles over 3 yearsThank you @lagbox. I will accept your answer as correct. I was missing the ->get(); Thank you so much!!!! Saved my day.
-
lagbox over 3 years@ErikJamesRobles btw,
latest
by default isorderBy('created_at', 'desc')
, or what ever the constCREATED_AT
was set as, so you can remove the extraorderBy
in your query you are building