Background
In our checkout process, we redirect to Stripe after creating an order object through an API request. To prevent users from clicking the "checkout" button multiple times during this process, we toggle a variable value to show a loading icon when the button is clicked.
Our application is built in Laravel with Jetstream (using Inertia), which limits our ability to reset values on form success due to how Inertia works.
Issue
Everything works as intended until a user clicks the browser back button after being redirected to Stripe. At that point, the loading icon remains visible because Vue does not reset the state of the variable to false.
<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>
Possible Solutions
We have attempted to use event resets like setUp, beforeMount, and mounted without success. Trying a ref inside setup instead of the data approach yielded the same issue.
Other attempts include generating the data property using a method, utilizing Inertia callbacks such as onSuccess (which didn't trigger properly due to JetStream), but none of these approaches resolved the issue.
We need ideas to ensure that the state is only applied during each page render and not stored in memory. This problem seems to be related to Inertia/Vue storing the state in the browser history.