奇怪的 Livewire + Turbolinks 行为答案

【问题标题】：Weird Livewire + Turbolinks behavior奇怪的 Livewire + Turbolinks 行为
【发布时间】：2021-05-05 19:47:14
【问题描述】：

我正在 TALL (Laravel 7) + Turbolinks 中构建一个管理面板。一个部分仅包含一个 Livewire 组件，该组件显示了一个分页表 Product 元素和一个搜索字段（在此之前我正在做的唯一“奇怪”的事情是将 Market 模型实例注入到中间件中的请求中） .

当我转到 /products 路线时出现问题，其中包含的 livewire 组件没有任何作用...第一页的记录很好，但分页链接已失效，搜索字段没有任何作用，没有控制台错误，没有 livewire 错误，就像 javascript 根本不起作用，这是最奇怪的事情：如果我重新加载页面，我在中间件中加载的 Market 数据被添加到查询字符串和所有内容开始按预期工作。

中间件：

public function handle($request, Closure $next) {
    $market = Market::findOrFail(session('selected_market'));
    $request->request->add(['market' => $market]);
    return $next($request);
}

Livewire 组件：

class ProductsTable extends Component{
    use WithPagination;

    public $search = '';
    protected $queryString = [
        'search' => ['except' => ''],
        'page' => ['except' => 1],
    ];

    public function render(){
        $products = Product::where('market_id', request('market')->id)
        ->when($this->search !== '', function($query) {
            $query->where('name', 'like', "%{$this->search}%");
            $query->orWhere('brand', 'like', "%{$this->search}%");
        })->paginate(15);

        return view('livewire.products-table', ['products' => $products]);
    }
}

Livewire 组件视图：

<input wire:model.debounce.500ms="search" type="search" name="search" id="search">

<table>
    @forelse($products as $product)
        <tr onclick="Turbolinks.visit('{{ route('product', $product->id) }}')">
            <td>{{ $product->name }}</td>
            ...
        </tr>
    @empty
        <tr><td>Nothing to show for {{ $search }}</td></tr>
    @endforelse
</table>

{{ $products->links() }}

我对此感到非常困惑和厌倦，我不知道发生了什么，类似的问题也没有得到明确的回答。

谢谢

【问题讨论】：

标签： laravel turbolinks laravel-livewire

【解决方案1】：

解决方案很简单，只需将其添加到您的脚本中：

document.addEventListener("turbolinks:load", function(event) {
  window.livewire.restart();
});

【讨论】：