How to disable input fields conditionally in Vuejs

 <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.

Answer

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).