-1

I have an HTML element like below

<div v-if="showOriginalContent"> original content</div>
<div v-else> default content </div>

initial value of showOriginalContent is false and from mounted method am calling an another method where i will make the value of showOriginalContent to true based on some conditions . Currently even if the showOriginalContent is true i can see that v-else is getting displayed for a fraction of seconds before v-if is rendered in the DOM . How can i solve this issue ? I tried to move the function call to all other life cycle methods but nothing is working . I have gone through before and after navigation approach in vue js ,Is it possible to apply that logic here?

Sumith Chalil
  • 348
  • 3
  • 22
  • 1
    `Currently even if the showOriginalContent is true i can see that v-else is getting displayed for a fraction of seconds before v-if is rendered in the DOM` ...I don't believe you. Show more code.. – Michal Levý Jun 08 '21 at 18:21
  • 1
    Also pls make up your mind - you can not use [vuejs2] and [vuejs3] tags at the same time... – Michal Levý Jun 08 '21 at 18:22
  • 1
    look into using [v-cloak](https://vuejs.org/v2/api/#v-cloak) to hide your app until loaded, it sounds like vue is not loading before you render the html, causing both divs to show for a moment – Lawrence Cherone Jun 08 '21 at 18:34
  • is `showOriginalContent` reactive? a `data` or `computed`? If you could show us more of your code then we can help you better. – Oliver Cape Jun 09 '21 at 09:51

4 Answers4

0

I think it's normal if I understood correctly what you posed as the problem.

Because the mounted state is called when the view has already been OK and displayed and only once.

So a variable declaring in this method its change will not necessarily have an effect on what should be displayed.

Try to see the lifecycle in Vuejs for more detail.

Put it in computed or watch methods to see.

snd
  • 133
  • 6
  • What is worth saying that in the view the last value that it knows of this variable is `false` – snd Jun 08 '21 at 18:29
0

Use an outer div and control this div with another variable that will be true when you are done with your condition parts in mounted hook.. like this..

<div v-if="conditioncheckdone">
<div v-if="showOriginalContent"> original content</div>
<div v-else> default content </div>
</div>

It will resolve your issue of displaying v-else stuff while you are checking your conditions in mounted

Shamsail
  • 612
  • 6
  • 17
  • I tried above solution but it is not working as expected . I think HTML template is getting rendered before VUE life cycle is getting executed . – Sumith Chalil Jun 12 '21 at 16:31
0

You can ensure your original content is hidden by setting the value of showOriginalContent to something that is not false... say an empty string '' and show your content only if showOriginalContent is the boolean you expect like so. This way, the content will not show unless it is changed to either true or false on mounting. Someone correct me if it is against any best practices. Cheers.

<div v-if="showOriginalContent===true"> original content</div>
<div v-if="showOriginalContent===false"> default content </div>
Denis Biwott
  • 430
  • 5
  • 4
-2

turn the default showOriginalContent value to null instead of false

omar kollkila
  • 5
  • 1
  • 3