[Vuejs]-How to conditionally render the screens with button in vuejs?

by

0👍

You could try to use steps to show everything you need.

data() {
        return{
            submissionStep: 1
        }
    }

I believe that you render different components for each screen. So you can show each component with v-if="submissionStep === 1"
Each time you click the next/submit button you change the submissionStep with a method binded like

update(){
            if(this.submissionStep <= 3){
                this.submissionStep += 1
            }
        },

Instead of 3 you can limit your steps as the number of screens you have

0👍

<button v-if="isHidden" v-on:click="isWelcome = true"> HELLO</button>

<button v-if="!isHidden" v-on:click="isWelcome = true"> HELLO</button>

Use the v-if attribute inside the buttons.

If you have more than one condition, do it in computed.

 computed: {
    displayButton() {
      return (this.isHidden && this.isWelcome);
    },
}

<button v-if="displayButton" v-on:click="isWelcome = true"> HELLO</button>

Leave a comment