我正在练习 Laravel、Vue 和 Inertia。我现在有以下问题。我创建了一个 Dashboard.vue 页面和各种组件，这些组件显示为该仪表板上的一个部分。一般来说，我可以看到包含组件的部分。喜欢：
<section class="overflow-x-auto w-full">
<Search />
</section>
但是，我有一个从 MySQL 数据库加载数据的组件。这些不是仪表板中数据库中显示的值。仅
"<p v-else> No hins available.</p"
Hin.vue：
<template>
<div>
<ul v-if="hins && hins.length > 0">
<li v-for="hin in hins" :key="hin.id">
{{ hin.id }} - {{ hin.hin }} - {{ hin.description }}
</li>
</ul>
<p v-else>No hins available.</p>
</div>
</template>
<script setup>
import { ref, defineProps } from "vue";
const props = defineProps({
hins: Array,
});
</script>
仪表板是这样的：
<script setup>
import { Head, Link } from "@inertiajs/vue3";
import Test1 from "./Test1.vue";
import Test2 from "./Test2.vue";
import Hin from "./Hin.vue";
import { ref } from "vue";
</script>
<script>
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
export default {
layout: AuthenticatedLayout,
};
</script>
<template>
<Head title="Dashboard" />
<section>
<Test1 />
</section>
<section>
<Test2 />
</section>
<section>
<Hin />
</section>
<section>
</section>
</template>
控制器：
<?php
namespace App\Http\Controllers;
use App\Models\Hin;
use Illuminate\Http\Request;
use Inertia\Inertia;
class HinController extends Controller
{
public function index()
{
$hins = Hin::get();
return Inertia::render('Hin', [
'hins' => $hins,
]);
}
}
dd($hins); = Illuminate\Database\Eloquent\Collection {#1502 ▼ // app/Http/Controllers/HinController.php:14 #items: array:130 [▶] #escapeWhenCastingToString: false }
Vue 开发工具：props hins：未定义
控制台日志：未定义
web.php：
Route::middleware(['auth'])->get('/hin', [HinController::class, 'index']);
也许我在这里犯了一个思维错误，或者错过了文档中的某些内容 - 有人可以给我一个正确的方向吗？
你说，
在这里 127.0.0.1:8000/hin 我可以从我的数据库中看到该表。这里 127.0.0.1:8000/dashboard “没有可用的 hins。”控制台错误“未定义”与 Vue Dev-Tool 中的相同：props hins:undefined。希望这有助于找到我的问题？
这是有道理的。当你的url有
/hin return Inertia::render('Hin', [
'hins' => $hins,
]);
但是，当您尝试在另一个 Vue 页面中显示 Hins.vue 时，您没有传入任何 props，因此 Hins.vue 将看不到任何 props。要解决这个问题，请传递 props。
解决此问题的一种方法是在仪表板控制器中获取
$hins = Hin::get();