Argument 1 passed to Symfony\Component\HttpFoundation\Response::setContent() with Axios Vue and Laravel 7

Question

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.

Answer 1

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.