How to conditionally render the screens with button in vuejs?

Question

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-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">
 <input
            :type="passwordFieldType"
            v-model="user.password"
            id="password"
            name="password"
            class="input-section-three"
            :class="{ 'is-invalid': submitted && $v.user.password.$error }"
            placeholder="Enter new password"
            :maxlength="maxpassword"
            v-on:keypress="isPassword($event)"
          />

<div
            v-if="submitted && $v.user.password.$error"
            class="invalid-feedback-two"
          >
            <span v-if="!$v.user.password.required">Password is required</span>
            <span v-if="!$v.user.password.minLength"
              >Minimum 8 character with
                        alphanumeric along with 1 capital letter, 1 small letter
                        and 1 special character at least</span
            >
          </div>

   <input
            :type="passwordFieldTypetwo"
            v-model="user.confirmPassword"
            id="confirmPassword"
            name="confirmPassword"
            class="input-section-three"
            :class="{
              'is-invalid': submitted && $v.user.confirmPassword.$error
            }"
            placeholder="Confirm password"
            :maxlength="maxconfirmpassword"
            v-on:keypress="isconfirmPassword($event)"
            :disabled="user.password.length < 8"
          />
           <div
            v-if="submitted && $v.user.confirmPassword.$error"
            class="invalid-feedback-two"
          >
            <span v-if="!$v.user.confirmPassword.required"
              >Confirm Password is required</span
            >
            <span v-else-if="!$v.user.confirmPassword.sameAsPassword"
              >Password must match</span
            >
          </div>
          
 <button  v-on:click="isWelcome = true" :disabled="user.confirmPassword.length < 8" > SUBMIT </button>
  </div>
  
   <div  v-else-if="isWelcome">
 //some code for screen 4
 
  <button>Fine</button>
  </div>

conditional rendering is working fine but, In screen3 submit button code, i have ""v-on:click="isWelcome = true""", if i remove this line, password validation is happening onclick of submit button, Where if i place again ""v-on:click="isWelcome = true""" without checking the validations simply its moving to 4th screen

score 0 · Answer 1 · answered Feb 25 '21 at 13:04

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

answered Feb 25 '21 at 13:04

Abregre

486
4
11

inside one component only i am rendering the div tags. For the button code above, if i remove the code "" v-on:click="isWelcome = true"" validations happening successfully, but if i place v-on:click="isWelcome = true" it's only rendering to the 4th screen without validations. – T dhanunjay Feb 25 '21 at 13:44
I think in the button, we need to keep condition for the code v-on:click="isWelcome = true" – T dhanunjay Feb 25 '21 at 13:45
v-on:click="isWelcome = true" should be a function that checks for errors first and if (!errors) { this.isWelcome = true} – Abregre Feb 25 '21 at 14:20
methods: { isWelcome(){ if (!errors) { this.isWelcome = true} }, – T dhanunjay Feb 25 '21 at 14:24
is that the one schould i replace? – T dhanunjay Feb 25 '21 at 14:25
yes, in that way this.isWelcome won't become true if there are errors – Abregre Feb 26 '21 at 10:35

score 0 · Answer 2 · answered Feb 25 '21 at 13:55

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>

answered Feb 25 '21 at 13:55

cooldar

56
3

Comments are not for extended discussion; this conversation has been [moved to chat](https://chat.stackoverflow.com/rooms/229428/discussion-on-answer-by-cooldar-how-to-conditionally-render-the-screens-with-but). – Samuel Liew Mar 03 '21 at 00:53

How to conditionally render the screens with button in vuejs?

2 Answers2