How to conditionally render the screens in Vuejs?

export default {
  name: "HelloWworld",

  data: function () {
    return {
      
      isHidden: false,
      isWelcome: false,
      isFadeout: false,
      
      }
      }

 <div  v-if="!isHidden">
 //some code for screen1
 
  <button v-on:click="isHidden = true"> HELLO</button>
  </div>
  
   <div  v-if="isHidden && !isFadeout">
 //some code for screen 2
 
  <button v-on:click="isFadeout = true"> Hi</button>
  </div>
  
   <div  v-if="isFadeout && isHidden">
 //some code for screen 3
 
  <button v-on:click="isHidden = true"> HELLO</button>
  </div>
  
   <div  v-if="isWelcome && isHidden">
 //some code for screen 4
 
  <button v-on:click="isHidden = true"> Fine</button>
  </div>

How to conditionally render the screens. Till three screens its rendering successfully fine but got stuck at 3rd screen button, where its not redirecting to 4th screen

Answer

Try to use this and try to add required code for 4th screen button

    <div  v-if="!isHidden">
 //some code for screen1
 
  <button v-on:click="isHidden = true"> HELLO</button>
  </div>
  
   <div  v-else-if="isHidden && !isFadeout">
 //some code for screen 2
 
  <button v-on:click="isFadeout = true"> Hi</button>
  </div>
  
   <div  v-else-if="isFadeout && isHidden && !isWelcome">
 //some code for screen 3
 
  <button v-on:click="isWelcome = true"> HELLO</button>
  </div>
  
   <div  v-else-if="isWelcome">
 //some code for screen 4
 
  <button>Fine</button>
  </div>

Advertisement

Answer