search

Home  >  Q&A  >  body text

Keep state persistent between page reloads

<p>Maybe this is a strange question, but I'm new to Vue and haven't found an answer yet. When I use v-if and v-else everything works fine: </p> <pre class="brush:php;toolbar:false;"><CodeForm v-if="isLoginFormSent" /> <LoginForm v-else /></pre> <p>But after reloading the page, everything goes back to v-if state. Is there a way to ensure that the v-else status is shown after the page reloads? </p>
P粉848442185P粉848442185553 days ago537

reply all(1)I'll reply

  • P粉023650014

    P粉0236500142023-08-16 00:45:56

    When the page is reloaded in a Vue app, the component's state is reset to its initial state and the data properties are returned to their default values, which is why you are encountering this behavior.

    If you want to preserve v-else state across page reloads, you can use different strategies, such as persisting state in local or session storage, cookies or URL state like Vue Router).

    The easiest way is to save it in localStorage. Please refer to this article to learn how to use localStorage for binding.

    reply
    0
  • Cancelreply