All threads / Vue-Turbolinks show stale information in between page load
Ask A Question

Notifications

You’re not receiving notifications from this thread.

Vue-Turbolinks show stale information in between page load

Yi Mei Wang asked in Javascript

I have a shopping cart item counter on my navbar that is first rendered by Rails then gets taken over by Vue once DOM contents are loaded. But the problem is that in between page load, Vue-Turbolinks has to destroy the Vue instance, wait for the page load, and then re-mount the Vue instance. This results in stale information showing on the browser (if the user has added more items to cart) while Vue is gone because v-text is down during this time.

Is there a way to work around this? I've tried v-cloak which works, but doesn't make for as good of a UX since the number temporarily disappears and reappears in between page load

<span v-text="rails.cart_items.length"><%= @shopping_cart.shopping_cart_items.length %></span>

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 66,029+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2022 GoRails, LLC. All rights reserved.