Fondo
Tenemos una página de pago que redirige a Stripe una vez que se ha creado un objeto de pedido. Como esto es a través de una solicitud de API, lleva un poco de tiempo. Por lo tanto, debemos bloquear el botón "Pagar" una vez que se haya hecho clic para que no se pueda hacer clic varias veces.
Hacemos esto actualmente mostrando un ícono de carga cuando se hace clic en el botón, para lograr eso, alternamos un valor variable.
La aplicación está en Laravel con Jetstream (con Inertia) y estamos restringidos en términos de restablecer los valores nosotros mismos en el formulario de éxito debido a Inertia.
Problema
Esto funciona bien a menos que el usuario haga clic en el botón Atrás de su navegador, después de redirigir a Stripe. Si lo hacen, el ícono de carga permanece visible y parece que Vue no está restableciendo el estado de la variable a falso.
Código de ejemplo
<template> <div> <div v-if="loadingCheckout">Loading</div> <button v-if="!loadingCheckout" @click="startPurchase">Checkout</button> </div> </template> <script> import { defineComponent, ref } from 'vue' export default defineComponent({ data() { return { loadingCheckout: false, }; }, methods: { startPurchase() { this.loadingCheckout = true; // Create checkout logic } } }) </script>Soluciones tentativas
Hemos intentado usar reinicios de eventos como setUp , beforeMount , mounted sin suerte. Además, he intentado usar una ref dentro de la configuración en lugar del enfoque de datos, pero se aplica el mismo problema.
También hemos intentado usar un método para generar la propiedad de datos pero el mismo problema. También intenté usar las devoluciones de llamada de Inertia en el formulario, como onSuccess , sin embargo, estas no se activan, suponiendo que esto se deba a la interferencia de JetStream.
Cualquier idea sería útil, lo ideal es que podamos tener este estado solo aplicado durante cada renderizado de la página y nunca guardado en la memoria realmente. Creo que el problema proviene de Inertia/Vue que almacena el estado en el historial del navegador.
Puede probar con onpopstate para actualizar la página cada vez que haga clic en el botón Atrás.
window.onpopstate = function () { // reset your state };Para resolver esto, dejé de usar los métodos de formulario Inertia https://inertiajs.com/forms#submitting-forms y en su lugar usé los métodos auxiliares de formulario https://inertiajs.com/forms#form-helper que funcionan devoluciones de llamada
Habiendo reemplazado
this.$inertia.post(route('purchase.store'));con
this.$inertia.form().post(route('purchase.store'), { onFinish: () => this.loadingCheckout = false, })Mi código ahora se parece al siguiente:
<template> <div> <div v-if="loadingCheckout">Loading</div> <button v-if="!loadingCheckout" @click="startPurchase">Checkout</button> </div> </template> <script> import { defineComponent, ref } from 'vue' export default defineComponent({ data() { return { loadingCheckout: false, }; }, methods: { startPurchase() { this.loadingCheckout = true; // Create checkout logic this.$inertia.form().post(route('purchase.store'), { preserveScroll: true, onFinish: () => this.loadingCheckout = false, }) } } }) </script>