How to conditionally render 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.

What i am trying to do is, Check the validations and move to 4th screen on click of submit button in screen 3. I guess logic should be placed inside of submit button in screen3.

Hi Abhinav, Why you don't use `computed` property to check your validation before returning true to `welcome` ? — Sayf-Eddine, Feb 26 '21 at 07:08
with this answer v-on:click="isWelcome = user.confirmPassword.length >= 8" — T dhanunjay, Feb 26 '21 at 09:24
It's working fine with this code but issue is, Initially if i click on submit button in screen3, validations are working fine but in the password confirmation field if i enter password which is not matching, but if exceed 8 characters. it is redirecting to 4th screen — T dhanunjay, Feb 26 '21 at 09:24

Kubwimana Adrien · Answer 1 · 2021-02-26T16:03:07.253

0

I am assuming you have defined the user object you're using for v-model. If not, that might be a part of the issue. however this will work

v-on:click="[isWelcome = user.confirmPassword.length >= 8]"

If that doesn't work then the issue will be you user object and v-models.

edited Feb 26 '21 at 16:03

answered Feb 26 '21 at 07:08

Kubwimana Adrien

2,463
2
8
11

It's working fine with this code but issue is, Initially if i click on submit button in screen3, validations are working fine but in the password confirmation field if i enter password which is not matching, but if exceed 8 characters. it is redirecting to 4th screen. – T dhanunjay Feb 26 '21 at 08:56
@taneerudhanunjay I have updated the answer. try to wrap the the click callback into `[]` – Kubwimana Adrien Feb 26 '21 at 16:04
Tried that same issue, May be anything need to change in confirmpassword field, to keep condition like if password same only redirect to another page. – T dhanunjay Feb 28 '21 at 13:56
This is my code in confirm password validation confirmPassword: { required, sameAsPassword: sameAs("password") }, – T dhanunjay Feb 28 '21 at 13:57

How to conditionally render with button in Vuejs?

1 Answers1