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>

Reply
Join the discussion
Create an account Log in

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

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

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

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

    © 2024 GoRails, LLC. All rights reserved.