Laravel Livewire/AlpineJS : Disable a button while loading data from an API and then enabling it again

Question

这应该很简单，但我不明白。我想复制一个按钮的功能，当按下按钮时转到 API(这可能需要大约一分钟来获取数据并处理它)，它会被禁用，并在加载数据后被启用。

我正在使用 Laravel/Livewire/Alpine

因此，在我的 livewire 组件中我有:

public $loading = false;

在我的 Blade 文件中，我有按钮所在的 div 的声明:

  <div
    class="grid grid-cols-3 gap-4"
    x-data="{
      loading: @entangle('loading')
    }"
    >

然后按钮x-bind的disabled属性为loading值，当按钮被点击时，它会改变loading变量的属性，并调用加载函数

    <button
      type="button"
      class="btn btn-sm btn-jbn"
      x-on:click="loading = true"
      x-bind:disabled="loading"
      wire:click="loader"
      >
      Load API
    </button>

它做了它应该做的...按钮变灰，变得不可用，光标改变等等，它在我的 livewire 组件中执行加载程序功能，但它再也没有返回到正常状态加载 API。在我的 livewiere 组件中，我有:

public function loader() {
  // API call and logic goes here, this works

  $this->loading = false;
}

所以我想在 API 进程结束时，纠缠变量 loading 会将按钮返回到其正常状态，但它不会

我错过了什么？

Answer 1

Livewire 已经整合了处理 loading-states 的功能.您可以使用它，而不是自己实现。

摆脱所有当前的加载逻辑，只需在按钮上使用 wire:loading 和 wire:target。

wire:loading可以通过wire:loading.attr="disabled"直接切换disabled属性，wire:target是将该加载状态的目标设置为您正在调用的方法，因此在您的情况下是 wire:target="loader"。

这意味着你的按钮看起来像这样，

<button
    type="button"
    class="btn btn-sm btn-jbn"
    wire:click="loader"
    wire:loading.attr="disabled" 
    wire:target="loader"
>
    Load API
</button>