Laravel vue.js 中的数组到字符串转换错误

Array to String conversion Error in Laravel vue.js

我之前已经发帖了,没有真正的回复,所以我再试一次。我正在尝试构建一个简单的 table 来从 mongodb 数据库中读取数据,这些数据将通过在 laravel 中使用查询生成器检索,数据需要使用 vue 组件显示但是当我尝试加载页面时出现错误消息: 如果需要完整的错误消息:现在编辑错误已修复新的问题是没有数据只显示 table

的标题
   ErrorException 

   Array to string conversion

   at vendor/laravel/framework/src/Illuminate/Routing/ResourceRegistrar.php:416
  412▕     protected function getResourceAction($resource, $controller, $method, $options)
413▕     {
414▕         $name = $this->getResourceRouteName($resource, $method, $options);
415▕ 
➜ 416▕         $action = ['as' => $name, 'uses' => $controller.'@'.$method];
417▕ 
418▕         if (isset($options['middleware'])) {
419▕             $action['middleware'] = $options['middleware'];
420▕         }

   +14 vendor frames 
   15  routes/api.php:20
    Illuminate\Support\Facades\Facade::__callStatic()

   +3 vendor frames 
   19  routes/api.php:21
   Illuminate\Routing\RouteRegistrar::group()

如果您想复制,这是我使用的代码:

api.php 路线:

Route::middleware('api')->group(function () {
Route::resource('/home', [ProductController::class,'home']);
});

web.php 路线:

Route::get('{any}', function () {
return view('home');
})->where('any', '.*');

PostController Home 方法:

public function home() {
    $posts = Post::paginate(4);

    return response()->json($posts);
}

主页组件:

<template>
<div>
        <table>
            <tr>
                <td>Id</td>
                <td>Title</td>
                <td>Status</td>
            </tr>
         <tr v-for="El in results" v-bind:key="El.id" >
             <td>{{El.id}}</td>
            <td>{{El.STATUS}}</td>
        </tr>
        </table>
        
</div>
</template>

<script>

export default{
     data() {
        return {
            results: []
        };
    },
    methods: {
        fetch() {
            axios.get('/api/home')
                .then(response => this.results = response.data)
                .catch(error => console.log(error));
        }
    }
}
</script>

Home.blade.php:

@extends('layouts.app')
@section('content')
<div class="container" id="app">
<home-component></home-component>
</div>
@endsection 

代码似乎工作正常,问题是从 api 路由处理程序开始,但我不知道为什么以及如何解决它。所以,感谢任何和所有帮助和建议。 编辑:最初的问题是关于一个错误,该错误已被删除但被上面提到的新问题所取代。

您的问题是您为 Route::resource(...) 方法提供了太多参数。

Route::resource方法的目的是根据resourceful controller pattern.

定义多个路由及其对应的控制器动作

在您的情况下,您肯定没有使用足智多谋的控制器,因为您已将控制器操作定义为 public function home()。要解决此问题,您只需为您在 vue 组件中调用的端点定义 Route::get(...)

Route::middleware('api')->group(function () {
    Route::get('/home', [ProductController::class, 'home']);
});