如何保持 laravel livewire wire:submit. 防止重新加载页面

Question

我有一个非常简单的 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，除了 URLs 之外，它在环境之间都是一样的。我加载了 livewire:scripts 和 livewire:styles，它在本地也能正常工作，但在产品中却不行。

在产品中，页面重新加载。几天来我一直在努力解决这个问题……让我发疯。 TIA

Answer 1

缓存视图

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

这可以通过运行ning php artisan optimize:clear 清除缓存（特别是视图缓存）来解决。

缺少 Livewire 安装

但是，在某些情况下，Livewire 未安装或安装不正确。您可以确保在 Laravel 应用程序的根目录中通过运行ning 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

如何保持 laravel livewire wire:submit. 防止重新加载页面

how to keep laravel livewire wire:submit.prevent from reloading the page

laravel

laravel-livewire

缓存视图

缺少 Livewire 安装

使用 Alpine.js v3 和 Livewire v2w

Livewire 安装错误