Kindly observe the password fields. The fields for 'Password' and 'Confirm Password' are displayed upon clicking on the 'Change Password?' button.
The provided code functions properly and effectively validates the form using 'v-show', however, it fails to validate when 'v-if' is utilized.
I comprehend the roles of 'v-show' and 'v-if', alongside the functionalities within 'data(){}'. This information is clearly outlined in element-ui's documentation which can be accessed via this URL:
<template lang="pug">
el-dialog( width="600px", title="Users", :visible.sync="dialogVisible")
el-form.demo-ruleForm(:model="editedItem", status-icon, :rules="formRules", ref="userForm", label-width="140px")
el-form-item(label="Name", prop="firstName")
el-input(v-model="editedItem.name", auto-complete="off")
template(v-if="!changePassword")
el-form-item
el-button(@click="changePassword = true") Change Password?
template(v-else)
_el-form-item_(label="Password", prop="password")
el-input(type="password", v-model="editedItem.password", auto-complete="off")
_el-form-item_(label="Confirm Password", prop="confirmPassword")
el-input(type="password", v-model="editedItem.confirmPassword", auto-complete="off")
.dialog-footer(slot="footer")
el-button(type="primary", @click="submitForm('userForm')") Save
</template>
<script>
export default {
name: 'dialog-add-edit-user',
props: {
editedItem: Object,
},
data () {
const validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please input the password'))
} else {
if (this.confirmPassword !== '') {
this.$refs.userForm.validateField('confirmPassword')
}
callback()
}
}
const validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please input the password again'))
} else if (value !== this.editedItem.password) {
callback(new Error("The two inputs don't match!"))
} else {
callback()
}
}
return {
formRules: {
password: [
{
validator: validatePass,
trigger: 'blur'
}
],
confirmPassword: [
{
validator: validatePass2,
trigger: 'blur'
}
]
},
dialogVisible: false,
changePassword: false,
editedItem: {
name: '',
password: '',
confirmPassword: ''
}
}
},
methods: {
submitForm (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$emit('save-item');
console.log('Submit Successful!');
} else {
console.log('Error submitting the form');
return false;
}
});
}
}
}
</script>