参数 1 使用 Axios Vue 和 Laravel 7 传递给 Symfony\Component\HttpFoundation\Response::setContent()

Question

我正在使用带有 Vue 和 Axios 的 Laravel 7，我遇到了这个错误，但似乎无法找出为什么我会得到它。我在我的 Laravel 应用程序中为联系人使用 api 路由，没有控制器和一个联系人模型。我有一个名为 Contacts.vue 的 vue 组件。第一次尝试获取数据时，我遇到了 500 内部服务器错误，当我尝试访问有问题的路由 api/contacts 时，我遇到了以下错误：

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

对我来说，作为 Laravel 的新手，我不知道如何追查问题。除非与我尝试使用它的方式相比 axios 发生了变化，否则我没有丝毫线索。因此，任何帮助将不胜感激。谢谢你。

这是 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>

App 下 Models 文件夹中的 My Contact 模型

 <?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();
});

我从默认的welcome.blade.php 中调用它

<contacts></contacts>

再次，如果你能帮助我，我当然会很感激。先感谢您。

Answer 1

你正在从这条路线返回一个 Eloquent Builder 对象：

Route::get('contacts', function () {
    return Contact::latest()->orderBy('created_at', 'desc');
});

你不能返回这个，框架不知道如何处理这个对象，你应该执行查询并返回结果：

return Contact::latest()->get();

然后这个 Collection 将被序列化为 JSON。