Al hacer clic en el botón, se debe mostrar una rueda giratoria y también enviar el formulario. En Alpine V2 esto funcionaba correctamente, pero en Alpine.js V3 la rueda giratoria se muestra correctamente pero el formulario ya no se envía. Intenté devolver verdadero/falso dentro de x-on-click pero eso no hace la diferencia.
En otras palabras: ¿Cómo puedo lograr x-on: haga clic para enviar también el formulario en Alpine.js V3?
orden.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>acción-principal-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>El botón que se deshabilitó dinámicamente impidió que se enviara el formulario. Para resolver esto, también moví los datos x fuera del componente (lo que me parece feo, debe haber una manera de hacerlo más limpio). El componente también se puede utilizar si no se utiliza ningún formulario.
<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"