Laravel 8和TailwindCSS未定义的变量:header



我是Laravel 8和TailwindCSS的新手,所以我需要您的帮助来解决以下问题
我刚刚在资源中创建了一个新文件夹和一个扩展layouts.app的刀片文件。当我通过浏览器访问此文件时,我会收到以下错误:
Undefined variable: header (View: C:xampphtdocslibraryresourcesviewslayoutsapp.blade.php) (View: C:xampphtdocslibraryresourcesviewslayoutsapp.blade.php)
另一方面,如果我注释掉变量$header(和$slot(,那么我就不会得到我在刀片文件中编写的代码

我的路线代码:

`Route::get('/', function () {
return view('welcome');
});
Route::post('books', [BooksController::class, 'store']);
Route::patch('books/{book}', [BooksController::class, 'update']);
Route::delete('books/{book}', [BooksController::class, 'destroy']);
Route::get('/authors/create', [AuthorsController::class, 'create']);
Route::post('authors', [AuthorsController::class, 'store']);
Route::post('/checkout/{book}', [CheckoutBookController::class, 'store']);
Route::post('/checkin/{book}', [CheckinBookController::class, 'store']);
Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () {
return view('dashboard');
})->name('dashboard');`

app.blade:的代码

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
@livewireStyles
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.6.0/dist/alpine.js" defer></script>
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100">
@livewire('navigation-dropdown')
<!-- Page Heading -->
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
@stack('modals')
@livewireScripts
</body>
</html>

最后,名为create:的新刀片文件的代码

@extends('layouts.app')
@section('content')
<div class="bg-gray-300 h-screen">
<h1>ada</h1>
</div>
@endsection

提前谢谢你,

您的代码中似乎使用了livewire。因此,您需要创建一个livewire组件。你可以在这里找到如何做到这一点的指南:https://laravel-livewire.com/docs/2.x/making-components.

如果您浏览以上指南,您将得到两个新文件:一个livewire组件文件和一个渲染组件的blade视图文件。然后,您可以将以下内容添加到刀片文件中:

<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Page Header') }}
</h2>
</x-slot>
<div class="bg-gray-300 h-screen">
<h1>ada</h1>
</div>

第一部分占据标头的插槽,而另一部分占据主插槽。我希望这有助于澄清一些事情。

最新更新