时间戳

首页 > 解决方案 > 奇怪的 Livewire + Turbolinks 行为

laravel - 奇怪的 Livewire + Turbolinks 行为

问题描述

我正在 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);
}

活线组件：

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() }}

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

谢谢

标签： laravelturbolinkslaravel-livewire

解决方案

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

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

推荐阅读