Блог

Я использую компоненты livewire, но когда начинаю вводить текст в поле ввода поиска, флажки и значки в компоненте исчезают, и они появляются только после обновления страницы. Что может быть причиной такого поведения?

Вид лезвия

 <div>


    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
                            <div>
                                <h4 class="mb-3 mb-md-0">User Roles</h4>
                            </div>
                            <div class="d-flex align-items-center flex-wrap text-nowrap">
                                <div class="form-inline">
                                    <div class="input-group mr-2 mb-2 mb-md-0 d-md-non d-xl-flex">
                                        <input type="text" wire:model="search" class="form-control" placeholder="Search role...">
                                    </div>
                                    <div class="input-group mr-2 mb-2 mb-md-0 mt-3 d-md-non d-xl-flex">
                                        <select wire:model="sortAsc" class="form-control form-control-s mb-3">
                                            <option value="1">Ascending</option>
                                            <option value="0">Descending</option>
                                        </select>
                                    </div>
                                    <div class="input-group mr-2 mb-2 mb-md-0 mt-3 d-md-non d-xl-flex">
                                        <select wire:model="perPage" class="form-control form-control-s mb-3">
                                            <option value="5">5</option>
                                            <option value="10">10</option>
                                            <option value="15">15</option>
                                        </select>
                                    </div>
                                </div>

                                <a href="{{ route('create-role') }}" class="btn btn-success btn-icon-text mr-2 mb-2 mb-md-0">
                                    <i class="btn-icon-prepend" data-feather="plus"></i>
                                    Add Role
                                </a>

                                <button wire:click="deleteRoles" type="button" class="btn btn-danger btn-icon-text mb-2 mb-md-0">
                                    <i class="btn-icon-prepend" data-feather="trash-2"></i>
                                    Delete Role
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        @if (count($roles) > 0)
                            <div class="table-responsive">
                                <table id="dataTableExample" class="table">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>#</th>
                                            <th>Display Name</th>
                                            <th>Description</th>
                                            <th>Created</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($roles as $role)
                                        <tr wire:key="{{ $role->name }}">
                                            <td>
                                                <div class="form-check">
                                                    <label class="form-check-label">
                                                      <input type="checkbox" wire:model="selectedRoles.{{ $role->id }}" class="form-check-input">
                                                    </label>
                                                </div>
                                            </td>
                                            <td>{{ $role->id }}</td>
                                            <td>{{ $role->display_name }}</td>
                                            <td>{{ $role->description }}</td>
                                            <td>{{ $role->created_at->diffForHumans() }}</td>
                                            <td>
                                                <a href="{{ route('edit-role', $role->name) }}" class="btn btn-primary btn-icon-text mr-2 mb-2 mb-md-0">
                                                    <i class="btn-icon-prepend" data-feather="edit-2"></i>
                                                    Edit
                                                </a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <div>{{ $roles->links() }}</div>
                            </div>
                        @else
                            <p>No user roles found.</p>
                        @endif
                    </div>
                </div>

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

 

Соответствующий компонент livewire

 <?php

namespace AppHttpLivewireRoles;

use LivewireComponent;
use AppModelsRole;
use LivewireWithPagination;

class Index extends Component
{
    use WithPagination;
    protected $paginationTheme = 'bootstrap';
    public $selectedRoles = [];

    public $search = '';
    public $perPage = 10;
    public $sortField = 'id';
    public $sortAsc = true;

    public function render()
    {
        return view('livewire.roles.index', [
            'roles' => Role::search($this->search)
            ->orderBy($this->sortField, $this->sortAsc ? 'asc' : 'desc')
            ->simplePaginate($this->perPage)
        ])
        ->extends('layout.master');
    }

    public function createRole(){
        return view('livewire.roles.create')
        ->extends('layout.master');
    }

    public function deleteRoles(){
        Role::destroy($this->selectedRoles);
    }

}

 

Что может быть причиной этой проблемы?

попробуйте изменить эти строки, на самом деле я использую это как документацию livewire

 'roles' => Role::where('someColumn','like','%'.$this->search.'%')
                 orWhere('anotherColumn','like','%'.$this->searchTerm.'%')
            ->orderBy($this->sortField, $this->sortAsc ? 'asc' : 'desc')
            ->paginate($this->perPage)