如何在 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.

Answer 1

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

Answer 2

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 {}