Livewire - Ajax 没有被解雇答案

【问题标题】：Livewire - Ajax not being firedLivewire - Ajax 没有被解雇
【发布时间】：2021-02-16 02:12:16
【问题描述】：

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

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

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

刀片组件：

<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"

【问题讨论】：

你能澄清一下吗？输入内容时，ajax 搜索输入不起作用？
您能否向我们展示您如何访问此 livewire 组件以及有关刀片视图和 Livewire 组件的更多内容？
@tonoslfx 正确 - 搜索不工作并且没有发出网络请求。

标签： laravel laravel-livewire

【解决方案1】：

你用错误的路径调用 javascript

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

url('app.js') 会给你完整的 URL http://localhost/ressource.js
mix('app.js') 将为您提供带有适当哈希 http://localhost/ressource.js?id=1964becbdd96414518cd 的完整 URL

同时使用可能会给你一个奇怪的网址。我建议使用mix，因为它会为你的 JS 版本化，避免你在生产中缓存的麻烦。

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

【讨论】：

我不确定它是否能解决您的问题

【解决方案2】：

我可以通过将表格/搜索/分页从主刀片组件中移出到新的 Livewire 组件中，然后在主刀片组件中进行引用，如下所示。

<livewire:list-sites />

【讨论】：

【解决方案3】：

您缺少触发搜索的操作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

}

【讨论】：

你不应该需要 wire:keydown 。 wire:model="search" 属性应该足够了。至少我没用过wire:keydown
如果不是keydown，您如何检测输入更改以触发搜索？
Livewire 添加监听器并在每次输入更改时触发 ajax 请求，您可以使用额外的参数 wire:model.lazy wire:model.defer wire:model.debounce.500ms 修改此行为，并且 $search 的内容将更新 @ 987654321@
@ClémentBaconnier 我添加了说明...它是通过 web.php 加载的（例如，不是通过正常的。也许这就是问题？