奇怪的 Livewire + Turbolinks 行为

Question

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

当我转到 /products 路径时出现问题，其中包含的 livewire 组件没有任何作用...第一页的记录是 fine，但分页链接已失效并且搜索字段什么都不做，没有控制台错误，没有 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() }}

我真的很困惑和厌倦这个，我不知道发生了什么，类似的问题也没有得到明确的回答。

谢谢

Answer 1

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

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

奇怪的 Livewire + Turbolinks 行为

Weird Livewire + Turbolinks behavior

laravel

turbolinks

laravel-livewire