How to disable input fields conditionally in Vuejs

Question

 <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)"
          />
          
 <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)"
            
          />

I have two input fields like password and confirm password. where i am trying to disable confirm password field, untill user enter some content in password field. Can we do anything with v-bind:disabled="newPassword.length === 0 ? true : false" to get resolved.

Leszek Kicior · Accepted Answer · 2021-02-23 12:29:50Z

2

If you simply need to lock the second field until the user types anything in the first one, try using the disabled attribute on the second input:

<input 
    :disabled="!user.password"
    ...
>

This will set the disabled attribute as long as the value of user.password is falsy (eg. empty string).

answered Feb 23, 2021 at 12:29

Leszek Kicior

1932 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

T dhanunjay Over a year ago

Its working fine. But what if i want to set like, If user enter 8 digits in the first field, then only second input to be enabled. So in this case any attributes do i need to pass to :disabled=' ....'

Leszek Kicior Over a year ago

In that case, just change the condition to whatever you need (e.g. :disabled="user.password.length<8). If the condition is any more complicated than that, you'll want to move it to a separate method in the component.

Aasmund Berge Endresen · Accepted Answer · 2021-02-23 12:43:21Z

1

You can set either the :disabled="!newPassword" or :read-only="!newPassword" properties on the field.

Either one should achieve the desired outcome, and then in your css if you need to apply any specific styles to the field you can use #confirmPassword::disabled {} or #confirmPassword::read-only {}

answered Feb 23, 2021 at 12:43

Aasmund Berge Endresen

3471 gold badge3 silver badges7 bronze badges

2 Comments

T dhanunjay Over a year ago

Thanks for the info. Its working fine. But what if i want to set like, If user enter 8 digits in the first field, then only second input to be enabled. So in this case any attributes do i need to pass to :disabled=' ....'

Aasmund Berge Endresen Over a year ago

You can bind the value of disabled to any javascript variable or evaluation you like. So if you want to instead of saying when newPassword is empty, you want to say when the length is bigger then 8 you'll just say :disabled="newPassword.length >= 8"

Collectives™ on Stack Overflow

How to disable input fields conditionally in Vuejs

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related