请查看密码字段。 Change Password?时显示Password和Confirm Password字段Change Password? 按钮被点击。
下面的代码工作正常，并按照预期使用v-show验证窗体，但在使用v-if时不验证。
我理解v-show和v-if作用，以及data(){}中的函数，它是元素ui文档中的函数。 以下是文档的网址： http : //element.eleme.io/#/en-US/component/form#custom-validation-rules
<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('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!') } else { console.log('error submit!!') return false } }) } } } </script>Please look at password fields. Password and Confirm Password fields shows when Change Password? button is clicked.
Below code works fine and validates the form as expected with v-show but does not validates when v-if is used.
I understand what v-show and v-if does, and the functions in data(){} that's how it's in element-ui's doc. Here is the doc's url: http://element.eleme.io/#/en-US/component/form#custom-validation-rules
<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('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!') } else { console.log('error submit!!') return false } }) } } } </script>最满意答案
好吧，我想我明白这个问题是什么。
您的验证通过，但它不检查name和password ，只有passwordChange 。
所以如果你“......了解v-show和v-if是什么”，你会知道当你使用v-if / v-else时，这些元素不存在。 根据需要添加并删除它们。
这是一个问题，原因是元素库在添加时会经历一个初始化阶段。 该元素稍后使用$ref 。 看看SubmitForm ，它使用`this。$ refs [formName] .validate'
所以当你使用v-if/v-else ，因为元素不在那里，所以它们不会被正确调用。
你有两个选择，要么坚持v-show ，这应该很容易，或者你可以使用我已经利用第三方库进行破解的黑客，它们不允许强制手动或自动重新加载。 黑客攻击包括向主要元素添加一个key 。 所以html看起来像这样。
<el-form class="demo-ruleForm" :model="editedItem" status-icon="status-icon" :key="'form'+changePassword" <--- this is the magic :rules="formRules" ref="userForm" label-width="140px" >并在哈巴狗
el-form.demo-ruleForm(:model="editedItem", :key="'form'+changePassword", status-icon, :rules="formRules", ref="userForm", label-width="140px")
Ok, I think I understand what the issue is.
your validation is passing, but it's not checking name and password, only passwordChange.
so if you "... understand what v-show and v-if does" you'll know that the elements do not exist when you use v-if/v-else. They get added and removed as needed.
The reason this is a problem is that the element library goes through a initialization stage when they get added. The element gets referenced later using $ref. look at SubmitForm, it uses `this.$refs[formName].validate'
so when you use v-if/v-else, because the elements were not there to begin with, they will not be called properly.
you have two options, either stick with v-show, which should be easy enough, or you can use a hack I've been exploiting with 3rd party libraries that don't allow forcing a manual or auto reload. The hack consists of adding a key to the main element. So the html would look like this.
<el-form class="demo-ruleForm" :model="editedItem" status-icon="status-icon" :key="'form'+changePassword" <--- this is the magic :rules="formRules" ref="userForm" label-width="140px" >and in pug
el-form.demo-ruleForm(:model="editedItem", :key="'form'+changePassword", status-icon, :rules="formRules", ref="userForm", label-width="140px")
更多推荐
发布评论