如何保持 laravel livewire 线：submit.prevent 重新加载页面答案

【问题标题】：how to keep laravel livewire wire:submit.prevent from reloading the page如何保持 laravel livewire 线：submit.prevent 重新加载页面
【发布时间】：2021-10-08 21:25:26
【问题描述】：

我有一个非常简单的 livewire 组件，可以帮助用户存储虚 URL

<form wire:submit.prevent="save">
        <div class="form-group form-inline">
            <span>{{ config('app.url') }}/request/</span>
            <input type="text" id="vanity" wire:model.defer="vanityUrl" name="vanityUrl">
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary">@if($saved) Saved @else Save @endif</button>
            <button type="button" id="copy-vanity" class="btn btn-secondary">Copy</button>
        </div>
    </form>

保存操作也很简单。

public function save()
    {
        $user = Auth::user();
        $this->validate();
        $user->update(['vanity_slug' => Str::slug($this->vanityUrl)]);
        $this->vanityUrl = Str::slug($this->vanityUrl);
        $this->saved = true;
    }

这在本地有效，但在生产环境中无效。我正在使用 Forge、php7.4、L8，除了 URL 之外的环境之间都是一样的。我已经加载了 livewire:scripts 和 livewire:styles，它再次在本地工作，但在 prod 中没有。

在 prod 中，页面重新加载。几天来我一直试图弄清楚这一点......让我发疯。 TIA

【问题讨论】：

这是部署后的典型问题 - 确保实际安装并运行 Livewire php artisan optimize
我试过了，以及 PHP 工匠优化。两者都没有解决问题。 Livewire 已安装并链接，脚本加载得很好。这就是为什么这如此令人困惑。我确实加载了 Alpine 3，但我不应该导致这种情况。表单元素获取一个wire:id、wire:initial-data和wire:prevent.submit。
如果你有 Alpine.js v3，你需要 Livewire 2.5 或更高版本。当清除不起作用时，我听到的唯一解决方案是在您的生产环境中重新安装 Livewire - 在这种情况下，它没有正确安装
@qirel 这就是问题所在。谢谢你。把它放在答案中，我会接受。

标签： laravel laravel-livewire

【解决方案1】：

缓存视图

当 Livewire 在部署到生产环境后（或者就此而言，在 localhost 中设置之后）不工作时，最典型的问题是您的视图，特别是 layouts/app.blade.php 被缓存在 @987654323 之前@ 指令已加载。这意味着它不会将@livewireScripts 或@livewireStyles 渲染为组件，而是会输出文字字符串。

只需运行php artisan optimize:clear 即可解决此问题，以清除缓存（特别是视图cahce）。

缺少 Livewire 安装

但是，在某些情况下 Livewire 未安装 - 或未正确安装。您可以通过在 Laravel 应用程序的根目录中运行 composer show -D 来确保通过 composer 安装 Livewire。寻找livewire/livewire。如果它不存在，则安装它（参见https://laravel-livewire.com/docs/2.x/installation）。要通过 composer 安装 Livewire，请运行以下命令。

composer require livewire/livewire

使用 Alpine.js v3 和 Livewire v2w

如果您已更新到 Apline.js v3，则需要使用 Livewire v2.5 或更高版本。只需更新您的 Livewire 版本即可。

Livewire 安装错误

到目前为止，我听到的关于此类问题的最后一个场景是 Livewire 已安装 - 但它仍然无法正常工作。这是迄今为止我所看到的最不常见的。当 Livewire 挂钩的脚本未按预期工作时会发生这种情况（例如，带有 wire:submit.prevent="submit" 的表单正在提交实际表单而不是发送 AJAX 请求），但 Livewire 已安装并且 @livewireScrtips 正在按应有的方式呈现。无论出于何种原因发生这种情况，我都不确定（因为我没有亲身经历过），但它很容易解决。

这些情况的解决方案是重新安装 Livewire - 您只需删除并再次要求该软件包即可。重新安装后，最好清除缓存，以确保在没有 Livewire 指令的情况下不会缓存视图。

composer remove livewire/livewire && composer require livewire/livewire && php artisan optimize:clear

【讨论】：