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

【问题标题】：Form is not submitted anymore in Alpine.js V3在 Alpine.js V3 中不再提交表单
【发布时间】：2021-10-16 14:03:50
【问题描述】：

点击按钮应该显示一个微调器，并提交表单，在 Alpine V2 中这工作正常，但在 Alpine.js V3 中微调器显示正确但表单不再提交。我尝试在 x-on-click 中返回真/假，但这并没有什么不同。

换句话说：如何实现 x-on:click 在 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>

【问题讨论】：

标签： javascript laravel alpine.js

【解决方案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"

【讨论】：