Laravel Livewire 组件未渲染视图内容

问题描述 投票：0回答：1

我正在使用 Livewire 开发 Laravel 项目，并且遇到了一个问题，即我的 Livewire 组件的视图未在页面上呈现任何内容。导航到与组件关联的路由时，页面加载时没有错误，但不显示内容。我已经通过添加日志语句验证了组件的渲染方法正在被调用。

相关代码如下： 应用程序/Livewire/ManageUsers.php：


namespace App\Livewire;

use Livewire\Component;
use App\Models\User;
use Spatie\Permission\Models\Role;

class ManageUsers extends Component
{
    public $users = [];
    public $roles = [];
    public $selectedRole = [];
    public $newUserEmail = '';
    public $newUserName = '';
    // public $users;

    public function mount()
    {
        $this->users = User::all();
        $this->roles = Role::pluck('name', 'id')->toArray();

        foreach ($this->users as $user) {
            $userRoles = $user->getRoleNames();
            $this->selectedRole[$user->id] = $userRoles->isEmpty() ? null : $userRoles[0];
        }
    }
    
    public function updateUserRole($userId)
    {
        $user = User::find($userId);
        
        if ($user) {
            $user->syncRoles([$this->selectedRole[$userId]]);
        }
    }

    public function addUser()
    {
        $user = User::create([
            'name' => $this->newUserName,
            'email' => $this->newUserEmail,
            'password' => bcrypt('password')  // Standaard wachtwoord
        ]);

        $this->users->prepend($user);
    }

    public function render()
    {
        return view('livewire.manage-users');
    }
}

应用程序/Http/Middleware/RoleMiddleware.php

<?php
namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class RoleMiddleware
{
    public function handle(Request $request, Closure $next, $role)
    
    {
        \Log::info('Handling request in middleware...');
        if (!$request->user() || !$request->user()->hasRole($role)) {
            abort(403);
        }
        \Log::info('Rendering view...' . $request->user()->name . ' ' . $role . ' ' . $request->user()->hasRole($role));
        return $next($request);
    }
}

资源/视图/manage-users.blade.php：


@extends('layouts.app')


@section('content')
    <div class="container mx-auto mt-5">
        <h1 class="text-2xl mb-5">Beheer Permissies</h1>
        
        <livewire:manage-users />
        
    </div>
@endsection

资源/视图/livewire/manage-users.blade.php：

<div>
    
    <div>
        <input type="text" wire:model="newUserName" placeholder="Naam">
        <input type="email" wire:model="newUserEmail" placeholder="Email">
        <button wire:click="addUser">Voeg gebruiker toe</button>
    </div>

    <table>
        <thead>
            <tr>
                <th>Naam</th>
                <th>Email</th>
                <th>Rol</th>
                <th>Acties</th>
            </tr>
        </thead>
        <tbody>
            @foreach($users as $user)
                <tr>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->email }}</td>
                    <td>
                        <select wire:model="selectedRole.{{ $user->id }}" wire:change="updateUserRole({{ $user->id }})">
                            <option value="">Geen</option>
                            @foreach($roles as $role)
                                <option value="{{ $role }}">{{ $role }}</option>
                            @endforeach
                        </select>
                    </td>
                    <td>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

路线/web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Livewire\WeeskinderenTable;
use App\Http\Middleware\SetUserLanguage;
use App\Livewire\ManageUsers;


Route::get('/manage-users', ManageUsers::class)
->name('amanage-users')
->middleware(['auth', 'role:admin']);

日志语句按预期输出，应该传递给视图的数据存在且有效。问题似乎在于在视图中显示内容。

我尝试过的：

检查路由配置是否正确并指向Livewire组件。 使用 artisan 命令清除路由、视图和配置缓存。 检查浏览器控制台是否有 JavaScript 错误（未发现）。 已验证 Livewire CSS 和 JS 资源是否正确包含在布局中。 尽管执行了这些步骤，该页面仍然是空白的。任何有关可能出现问题或故障排除步骤的见解将不胜感激。

php angular laravel laravel-blade laravel-livewire
1个回答
-1
投票

看起来您的代码和设置总体上是正确的，但可能存在一些潜在问题导致 Livewire 组件的视图无法呈现。让我们完成一些故障排除步骤，以帮助您识别并解决问题：

  1. 在浏览器控制台中检查 Livewire 错误：

    • 确保您已在布局中正确包含 Livewire 的 JavaScript 资源。您可以检查浏览器的开发者控制台是否有任何与 Livewire 相关的错误或警告。

  2. 检查刀片组件语法：

    • 确保您在视图中使用正确的 Blade 组件语法。在您的 
      resources/views/manage-users.blade.php
      中，您有 
      <livewire:manage-users />
      ，如果 Livewire 组件名为 
      ManageUsers
      ，那么这应该是正确的。仔细检查组件名称是否与组件文件中的类名称匹配。

  3. 验证路由和中间件:

    • 确认
      routes/web.php
      中的路由配置正确，并且中间件
      'role:admin'
      允许访问。确保 
      role
      中间件按预期工作，并且具有“管理员”角色的用户可以访问该路由。

  4. 检查是否有任何 JavaScript 干扰：

    • 确保您的页面上没有 JavaScript 冲突。检查其他 JavaScript 库或脚本是否干扰 Livewire 的功能。

  5. 验证 CSS 样式:

    • 有时，CSS 样式可以隐藏或覆盖页面上的元素。确保没有 CSS 规则导致内容被隐藏。

  6. 检查日志中是否存在 Livewire 错误：

    • 除了浏览器控制台之外，还请检查 Laravel 日志中是否有任何与 Livewire 相关的错误。有时，Livewire 组件的问题可以记录在那里。

  7. 临时注释代码：

    • 暂时注释掉 Livewire 组件的部分代码以缩小问题范围。例如，注释掉角色和权限相关的逻辑，看看基本组件内容是否渲染。这可以帮助您确定代码的特定部分是否导致了问题。

  8. 验证数据可用性:

    • 确保您在 
      render
      方法中传递给 Livewire 组件的数据可用且格式正确。您可以在 
      dd($this->users, $this->roles);
      方法中添加 
      render
      来检查数据是否正确传递。

  9. 检查 Blade 文件名：确保您的 Blade 视图文件命名正确并与 

    return view('livewire.manage-users');
    方法中的 
    render
    语句匹配。该文件应在 
    manage-users.blade.php
    目录中命名为 
    resources/views/livewire
    。

  10. 检查权限：确保Blade视图文件及其父目录具有正确的文件权限。 Web 服务器用户应该可以读取它。

  11. Livewire 调试模式：您可以通过将 

    Livewire::devtools()
    添加到 
    boot
    中的 
    AppServiceProvider
    方法来启用 Livewire 调试模式。这可以深入了解 Livewire 的内部状态并帮助诊断问题。

  12. Livewire 版本兼容性：验证您的 Livewire 版本是否与您的 Laravel 版本兼容。如果您最近更新了 Laravel，则当前的 Livewire 版本可能存在兼容性问题。

完成这些步骤后，您应该能够确定问题的根本原因并采取适当的措施来解决它。请记住在每次进行更改时清除缓存并刷新浏览器，以确保您没有处理缓存的数据。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.