Alpine.js V3 中不再提交表单

Question

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

换句话说：如何实现 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>

主要动作-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"

Alpine.js V3 中不再提交表单

Form is not submitted anymore in Alpine.js V3

javascript

laravel

alpine.js