Reset Vue Value on Browser Back

Question

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.

As this is via an API request it takes a little bit of time. Is there a completion handler on this API request? Does it throw an error if the transaction is not completed? — jrend
– jrend, Commented Oct 12, 2021 at 15:54
@jrend when it's completed it redirects the page to Stripe, if it fails it throws an error which Inertia then handles to display. There's no completion handler that i can see is working, see paragraph 2 of the "attempted solutions" section — Dean Whitehouse
– Dean Whitehouse, Commented Oct 12, 2021 at 16:02
Would it help if you put property initialization inside mounted or created hook? Mounted would be setting this.loadingCheckout = false. It should trigger it even if the customer clicks back. — equi
– equi, Commented Oct 12, 2021 at 16:28
@equi I tried that yeah and nothing happened, even though the console log does occur so i know it's run. I'm guessing in the lifecycle that the setting of the values by Vue happens after the mount of the module — Dean Whitehouse
– Dean Whitehouse, Commented Oct 12, 2021 at 18:03

Dean Whitehouse · Accepted Answer · 2021-10-18 15:57:52Z

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>

Collectives™ on Stack Overflow

Reset Vue Value on Browser Back

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related