While developing a Vue.js template, I encountered a scenario on the sign-up page where I needed to compare passwords during user registration. To achieve this, I implemented a custom validation rule in the code snippet below:
<v-text-field
label="Password"
v-model="password"
:rules="passwordRules"
type="password"
required
></v-text-field>
<v-text-field
label="Confirm Password"
v-model="confirmPassword"
:rules="[confirmPasswordRules,passwordConfirmationRule]"
type="password"
required
></v-text-field>
Script:
data() {
return {
password: "",
confirmPassword: "",
passwordRules: [v => !!v || "Password is required"],
confirmPasswordRules: [v => !!v || "Password is required"]
};
},
Method for comparing passwords in computed properties:
computed: {
passwordConfirmationRule() {
return () => (this.password === this.confirmPassword) || 'Password must match';
}
}
Although the computed method works perfectly for comparing passwords, it generates an error in the console stating
[Vuetify] Rules should return a string or boolean, received 'object' instead