使用Bootstrap 4作为分页时使用分页主题无法在livewire中正常工作

如何解决使用Bootstrap 4作为分页时使用分页主题无法在livewire中正常工作

我在Laravel中做了一个简单的项目。我正在使用Livewire v ^ 2.2。

当我按照文档中的说明添加代码时，上一个和下一个按钮将失效。

PHP组件中的代码是：

// If I comment this out,the view is horrible but is working.
   // use WithPagination;
    
        // protected $paginationTheme = 'bootstrap';
    
        public function render()
        {
            return view('livewire.users',[
                'users' => User::paginate(1),]);
        }

在模板中：

<div>
    <h1>Users</h1>
    <div class="list-group">
    @foreach($users as $user)

            <a href="" class="list-group-item list-group-item list-group-item-action">
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">{{ $user->name }}</h5>
                    <small>{{ $user->created_at }}</small>
                </div>
                <p class="mb-1">{{ $user->email }}</p>
            </a>
    @endforeach
    </div>
    <br>
    {{ $users->links() }}
</div>

解决方法

尝试

terraform {
  source = "git::ssh://git@github.com/foo/modules.git//path/to/module?ref=v0.2.0"
}

将其添加到Livewire侧视图

use Livewire\WithPagination;

class NameComponent extends Component
{
    use WithPagination;
    protected $paginationTheme = 'bootstrap';

在@livewireScripts添加@stack（'scripts'）后在layouts / app.blade.php中

<div>
.....

    @push('scripts')
        <script>
            Livewire.restart();
        </script>
    @endpush
</div>

我找到了原因。

Livewire组件必须具有单个根元素。

我忘了在我看到的问题中添加第一行。