Background
We have a checkout page that redirects to Stripe once an order object has been created. As this is via an API request it takes a little bit of time. Therefore we need to block the "checkout" button once it's been clicked so it can't be clicked multiple times.
We do this currently by showing a loading icon when the button is clicked, to achieve that we toggle a variable value.
The app is in Laravel with Jetstream (w/ Inertia) and we're restricted in terms of resetting the values ourselves on form success due to Inertia.
Problem
This works fine unless the user then clicks their browser back button, after redirecting to Stripe. If they do that the loading icon stays visible and it appears Vue isn't resetting the state of the variable to false.
Example Code
<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>
Attempted Solutions
We've tried to use event resets such as setUp, beforeMount, mounted without any luck. Additionally have tried using a ref inside of setup instead of the data approach but the same issue applies.
We've also tried to use a method to generate the data property but same issue. Have also tried to use the Inertia callbacks on the form such as onSuccess however these don't get triggered, assuming this is due to JetStream interfering.
Any ideas would be helpful, the ideal is that we can have this state only applied during each render of the page and never kept in memory really. I think the issue comes from Inertia/Vue storing the state in the browser history.
You can try with onpopstate to refresh the page whenever you click on the back button.
window.onpopstate = function () {
// reset your state
};
To resolve this i've switched from using the Inertia form methods https://inertiajs.com/forms#submitting-forms and instead used the form helper methods https://inertiajs.com/forms#form-helper which do have working callbacks.
Having replaced
this.$inertia.post(route('purchase.store'));
with
this.$inertia.form().post(route('purchase.store'), {
onFinish: () => this.loadingCheckout = false,
})
My code now looks like the below:
<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>