Array to String conversion Error in Laravel vue.js-CodePudding

I have already posted before with no real replies so I am trying again. I am trying to build a simple table to read data from a mongodb database which will be retrieved by using a query builder in laravel the data needs to be displayed with a vue component but when I try to load up the page an error message comes up: The full error message if needed : Edit now the error has been fixed the new problem is that no data is being displayed just the titles of the 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()

Here is the code I have used if you wish to replicate:

api.php route:

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

web.php route:

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

PostController Home method:

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

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

Home component:

<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  id="app">
<home-component></home-component>
</div>
@endsection

The code seems to be working fine the problem is starting at the api route handler but the why and how to solve it are beyond me. SO, Any and all help and suggestions are appreciated. Edit: the original question was about an error which has since been removed but replaced with a new problem which is mentioned above.

CodePudding user response：

Your issue is that you are providing too many arguments to the Route::resource(...) method.

The purpose of the Route::resource method is to define multiple routes and their corresponding controller actions according to the resourceful controller pattern.

In your case, you definitely are not using resourceful controllers since you have defined your controller action as public function home(). To fix this, you can simply define the Route::get(...) for the endpoint you are calling in your vue component.

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