如何将对象传递到要显示的 Inertia.js 页面
How to pass object to Inertia.js page to be displayed
我想要的
将对象传递给正在渲染的 Vue 组件以显示对象的信息
我在做什么
页面控制器
<?php
namespace App\HTTP\Controllers;
use Inertia\Inertia;
use App\Http\Controllers\Controller;
use App\Models\project;
class ProjectController extends Controller {
public function project(project $project){
return Inertia::render('Projects/ProjectPage', [
'project' => [
'id' => $project->id,
'projectImage' => $project->projectImage,
'projectText' => $project->projectText,
]
]);
}
}
路由到页面
<div v-for="project in this.$page.props.projects" :key="project.id" class="flex flex-row py-2 hover:shadow-lg">
<inertia-link :href="route('projectPage', project.id)" > <ProjectTile :project="project" class="py-4"/> </inertia-link>
</div>
页面渲染对象
<template>
<!-- Root div -->
<div>
This is the project page
{{project.projectName}}
</div>
<!-- End Root div -->
</template>
<script>
export default {
props: {
project: Object,
}
}
</script>
路线在routes/web.php
Route::get('projects/{projectid}', [ProjectController::class, 'project'])->name('projectPage');
结果
page:Object
props:Object
errors:Object (empty)
project:Object
id:null
projectImage:null
projectText:null
此处传递给控制器的参数
public function project(project $project){ ... }
必须与此处路由中引用的内容相同
Route::get('projects/{projectid}')...
解决方案:
public function project(project $projectid){ ... }
我想要的
将对象传递给正在渲染的 Vue 组件以显示对象的信息
我在做什么
页面控制器
<?php
namespace App\HTTP\Controllers;
use Inertia\Inertia;
use App\Http\Controllers\Controller;
use App\Models\project;
class ProjectController extends Controller {
public function project(project $project){
return Inertia::render('Projects/ProjectPage', [
'project' => [
'id' => $project->id,
'projectImage' => $project->projectImage,
'projectText' => $project->projectText,
]
]);
}
}
路由到页面
<div v-for="project in this.$page.props.projects" :key="project.id" class="flex flex-row py-2 hover:shadow-lg">
<inertia-link :href="route('projectPage', project.id)" > <ProjectTile :project="project" class="py-4"/> </inertia-link>
</div>
页面渲染对象
<template>
<!-- Root div -->
<div>
This is the project page
{{project.projectName}}
</div>
<!-- End Root div -->
</template>
<script>
export default {
props: {
project: Object,
}
}
</script>
路线在routes/web.php
Route::get('projects/{projectid}', [ProjectController::class, 'project'])->name('projectPage');
结果
page:Object
props:Object
errors:Object (empty)
project:Object
id:null
projectImage:null
projectText:null
此处传递给控制器的参数
public function project(project $project){ ... }
必须与此处路由中引用的内容相同
Route::get('projects/{projectid}')...
解决方案:
public function project(project $projectid){ ... }