<input
:type="passwordFieldType"
v-model="user.password"
id="password"
name="password"
class="input-section-three-register"
value=""
placeholder="Enter new password"
autocomplete="off"
@change="disabledSubmit"
/>
<input
:type="passwordFieldTypetwo"
v-model="user.confirmPassword"
id="confirmPassword"
name="confirmPassword"
placeholder="Confirm password"
value=""
autocomplete="off"
:disabled="user.password.length < 8"
@change="disabledSubmit"
/>
mounted() {
this.disabledSubmit();
},
disabledSubmit() {
this.disableButton = this.user.password.length<8 ||
this.$v.user.password.$error ||
this.user.password!==this.user.confirmPassword;
},
<button
type="submit"
:disabled="disableButton"
>
Click me
</button>
The issue with the given code is that even if no data is entered initially, the button can still be clicked. The disable function only works after entering some data.