V-show not working immeadiately after a page is loaded

Asked Sep 19 '19 at 11:02

Active Sep 19 '19 at 11:02

Viewed 551 times

On my page I have multiple divs that look like that:

<div v-show="currentPage == 1" class="row">
  ...
</div>
<div v-show="currentPage == 2" class="row">
  ...
</div>
<div v-show="currentPage == 3" class="row">
  ...
</div>

currentPage is a variable defined in the vue script. The value of currentPage could be changed by changing the value after # in the URL. Problem is that when the page is loaded, for a very brief moment, the content of all pages is displayed and then, only the content of the desired page remains. I would like to ask how I could eliminate the initial flashing of all the content when entering the page.

asked Sep 19 '19 at 11:02

firsttimeoncomputer

You could use v-if and v-else-if so that there can only be one div showed. – PeeJee Sep 19 '19 at 11:13
If I use v-if instead of v-show, the same problem occurs. All the content is flashed and then only one div remains. – firsttimeoncomputer Sep 19 '19 at 11:20
1

Can you show your full vue component? OR a JSFiddle/Codesandbox – PeeJee Sep 19 '19 at 11:26
Maybe you need this: https://vuejs.org/v2/guide/components.html#Dynamic-Components – Loki Sep 19 '19 at 11:35
1

I think you're looking for `v-cloak`. https://stackoverflow.com/a/36187668/392102 – Roy J Sep 19 '19 at 11:42

V-show not working immeadiately after a page is loaded

0 Answers0