Laravel 10，Livewire 2：提交页面的模式中的分页

Question

莫代尔

<div class="modal fade" id="usersModal" tabindex="-1" wire:ignore.self>
  <div class="modal-dialog modal-fullscreen d-flex">
      <div class="modal-content" style="background: rgba(9, 30, 62, .8);">
          <div class="modal-header border-0">
              <button type="button" class="btn bg-white btn-close" data-bs-dismiss="modal" 
              aria-label="Close"></button>
          </div>
          <div class="modal-body my-0 w-100">

<div class="container">
  <div class="row">
    <div class="col-12">
    <div class="card py-1 px-1 bg-light-yellow">
      <div class="card-header d-flex align-items-center justify-content-between">
        <h3 class="card-title flex-grow-1">Liste des utilisateurs</h3>
        <div class="card-tools d-flex align-items-center">
           <button class="btn btn-yellow text-white me-4" type="button" title="Créer un utilisateur">
            <i class="fas fa-user-plus"></i>
            </button>
            <div class="input-group input-group-sm" style="width: 150px;">
            <input type="text" name="table_search_user" id="table_search_user" 
                            placeholder="Chercher.."
                            class="form-control float-right py-3 border border-yellow border-end-0">
            <div class="input-group-append bg-yellow text-white border border-start-0">
              <div class="input-group-text inputModal">
                <span class="fas fa-search py-1"></span>
              </div>
            </div>
            </div>
        </div>
        </div>

        <div class="card-body table-responsive p-0" style="height: 500px;">
        <table class="table table-head-fixed text-nowrap bg-white">
          <thead>
                <tr>
                <th>Users</th>
                <th>Roles</th>
                <th class="text-center">Actions</th>
                </tr>
              </thead>
              <tbody>
            @foreach ($theUsers as $theUser)
            <tr>
                   <td>{{ $theUser->fullName }} </td>
            <td>
                <button type="button" class="btn btn-default" data-bs-toggle="tooltip"
                                data-bs-title="Permissions: {{ $theUser->getPermissionsViaRoles()->implode('name', ' | ') }}"> {{ $theUser->getRoleNames()->first() }}
                            </button>
            </td>
                        <td class="text-center">
                <button class="btn btn-yellow-white" title="Update">
                <i class="fas fa-edit"></i>
                </button>
                <button class="btn btn-yellow-white" title="Delete">
                <i class="fas fa-trash-alt" style="color: #d00625;"></i>
                </button>
            </td>

            </tr>
            @endforeach
          </tbody>
        </table>
        </div>

    <div class="card-footer clearfix">
        {{ $theUsers->links() }}
    </div>
    </div>
  </div>
</div>
    
</div>

</div>
          
      </div>
  </div>
</div>

控制器

<?php

namespace App\Http\Livewire;

use App\Models\User;
use Livewire\Component;
use Livewire\WithPagination;

class Utilisateurs extends Component
{
  use WithPagination;                       // <-| If i use These commands, the pagination doesn't work,
  protected $paginationTheme= "bootstrap";  // <-| & if i remove its the pagination work but the page submitting.

  public function render()
  {
      $theUsers = User::paginate(5);
      return view('livewire.utilisateur.utilisateurs', compact('theUsers'));
  }
}

在控制器中，如果我使用： use WithPagination； protected $paginationTheme= "bootstrap"; 命令显示分页，但在用户模式列表中不起作用，但如果我删除它，分页可以工作，但页面提交和模式被隐藏。 如果我单击分页链接中的下一页，有人可以帮助我设置模式显示和页面不提交。谢谢你。

Answer 1

:) 我解决了问题。我忘记在母版页中添加 @livewireStyles 和 @livewireScripts。现在可以工作了。