如何解决Laravel 8和TailwindCSS未定义变量:标头
我是Laravel 8和TailwindCSS的新手,所以需要您的以下帮助。
我刚刚在资源内部创建了一个新文件夹,并创建了一个扩展layouts.app
的刀片文件。通过浏览器访问此文件时,出现以下错误:Undefined variable: header (View: C:\xampp\htdocs\library\resources\views\layouts\app.blade.php) (View: C:\xampp\htdocs\library\resources\views\layouts\app.blade.php)
。
另一方面,如果我注释掉变量$ header(和$ slot),则不会得到我在该刀片文件中编写的代码。
我的路线代码:
`Route::get('/',function () {
return view('welcome');
});
Route::post('books',[BooksController::class,'store']);
Route::patch('books/{book}','update']);
Route::delete('books/{book}','destroy']);
Route::get('/authors/create',[AuthorsController::class,'create']);
Route::post('authors','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。因此,您需要创建一个带电电线组件。您可以在这里找到有关操作方法的指南:https://laravel-livewire.com/docs/2.x/making-components。
如果您通过上面的指南,将得到两个新文件:一个livewire组件文件和一个呈现该组件的刀片视图文件。然后,您可以将以下内容添加到刀片文件中:
<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>
第一部分占据标题的插槽,另一部分占据主插槽。我希望这有助于澄清一些事情。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。