在Alpine.js V3中不再提交表单

Question

点击按钮应该会显示一个旋转框，同时也会提交表单，在阿尔卑斯V2中这是正常工作的，但是在Alpine.js V3中旋转框可以正确显示，但是表单不再被提交。我尝试在x-on-click中返回true/false，但这没有什么区别。

换句话说:我如何实现x-on:单击也可以在Alpine.js V3中提交表单？

order.blade.php：

<form method="POST" action="{{ route('wishlists.presents.order', $wishlist->id) }}">
  {{ method_field('PATCH') }}
  @csrf
  <div class="sm:flex sm:items-center">
    <x-jet-label class="sm:flex-grow" for="" value="{!! __('Drag & drop them in the order you like. Then tap Save') !!}" />
    <x-actionbar class="2c570:py-0">
      <x-action-secondary href="{{ route('wishlists.presents.index', ['wishlist' => $wishlist['id']]) }}" />
      <x-action-primary-alpine type="submit" />
    </x-actionbar>
  </div>

action-primary-alpine.blade.php

@props([
  'tekst' => __('Save'),
  'loadingTekst' => __('Saving'),
  'width' => '32',
  'type' => '',
  'color' => 'purple',
])

<div x-data="{busy: false}">
  <button :disabled=busy x-on:click="busy = true" {{ $attributes->merge(['class' => "flex items-center justify-center bg-{$color}-500 w-{$width} h-12 border border-transparent rounded-full text-{$color}-100 tracking-widest hover:text-white active:bg-{$color}-600 focus:outline-none focus:ring-4 focus:ring-{$color}-200 transition ease-in-out duration-150"]) }}>
    <div class="flex" x-show="busy">
      <x-loading />
      <div class="w-2"></div>
      <div class="tracking-tighter">{{ $loadingTekst }}</div>
    </div>
    <div class="flex" x-show="!busy">
      <x-svg.checkmark />
      <div class="w-2"></div>
      {{ $tekst }}
    </div>
  </button>
</div>

Answer 1

按钮被动态禁用会阻止表单的提交。为了解决这个问题，我还将x-data移到了组件之外(这在我看来很难看，必须有一种更干净的方法)。如果没有使用表单，也可以使用该组件。

<form method="POST" action="{{ route('wishlists.presents.order', $wishlist->id)}}"
        x-data="{busy: false, isSubmitted: false}" x-on:submit="isSubmitted = true">

@props([
...
'submitsForm' => 'false',
])

<div>
<button :disabled={{ $submitsForm == 'true' ? 'isSubmitted' : 'busy'}} x-on:click="busy = true"