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']);
});
我之前已经发帖了,没有真正的回复,所以我再试一次。我正在尝试构建一个简单的 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']);
});