Livewire - Ajax 未被解雇

Question

我有一个 Laravel Livewire 组件，Ajax 事件没有被触发。

我有一个搜索输入文件，可以将搜索字符串发送到我的组件。没有 Ajax 个事件被触发，结果也没有得到更新。

注意：分页 Livewire 控件也不起作用 - Laravel 分页确实起作用，但是当我使用 UsePagination 特性时，分页不起作用。没有任何网络调用，也没有 Javascript 错误。

Blade 分量：

<input type="text" class="min-w-full" placeholder="Search" wire:model="search" />

组件：

  public function render()
    {
        return view('livewire.manage-sites', [
            'sites' => app(WebsiteRepository::class)->query()->where('organization_name', 'like', '%' . $this->search . '%')->paginate(10),
        ])->extends('layouts.management');

    }

样式包含在基本布局页面中：

<livewire:styles />

正文中包含脚本：

<body>
    @yield('body')

    <livewire:scripts />
    <script src="{{ url(mix('js/app.js')) }}"></script>

    @stack('scripts')

</body>

正在通过 web.php 中的路由定义包含该组件。

Route::get('manage-sites', \App\Http\Livewire\ManageSites::class)
        ->name('manage.sites.index');

相关作曲作品：

"php": "^7.2.5",
"blade-ui-kit/blade-ui-kit": "^0.1.1",
"fideloper/proxy": "^4.2",
"fruitcake/laravel-cors": "^2.0",
"guzzlehttp/guzzle": "^6.3",
"hyn/multi-tenant": "^5.6",
"laravel-frontend-presets/tall": "^1.7",
"laravel/framework": "^7.24",
"laravel/tinker": "^2.0",
"league/flysystem-aws-s3-v3": "^1.0",
"livewire/livewire": "^2.0",
"sentry/sentry-laravel": "^1.8",
"spatie/laravel-activitylog": "^3.14",
"spatie/laravel-medialibrary": "^8.0.0",
"spatie/laravel-permission": "^3.16"

Answer 1

您缺少 keydown 触发搜索的操作。

<input type="text" class="min-w-full" placeholder="Search" 
wire:model="keyword" 
wire:keydown.debounce.350ms="search" />

// wire:keydown.debounce.350ms delays by 350ms

在您的 Livewire 搜索控制器中

public function search() {

 // $this->keyword;
 // your eloquent search query

}

Answer 2

你用错误的路径调用 javascript

~~<script src="{{ url(mix('js/app.js')) }}"></script>~~

url('app.js') 会给你完整的 url http://localhost/ressource.js
mix('app.js') 会给你完整的 url 和适当的散列 http://localhost/ressource.js?id=1964becbdd96414518cd

同时使用两者可能会给您带来奇怪的感觉 url。我建议使用 mix 因为它会控制你的 JS 版本并避免你在生产中遇到缓存问题。

<script src="{{ mix('js/app.js') }}"></script>

Answer 3

我能够通过将 table/search/pagination 从主 blade 组件中移出，移到一个新的 Livewire 组件中，然后在主 blade 组件中引用为下面。

<livewire:list-sites />

Livewire - Ajax 未被解雇

Livewire - Ajax not being fired

laravel

laravel-livewire