Javascript 如何制作Vue'；s元素ui validateField（）与v-if一起工作？

请查看密码字段<代码>密码和

确认密码

字段在单击

更改密码？

按钮时显示

下面的代码工作正常，使用

v-show

验证表单，但在使用

v-if

时不验证表单

我了解

v-show

和

v-if

的功能，以及

data（）{}

中的函数，这就是它在元素ui的文档中的作用。以下是文档的url：

el对话框（width=“600px”，title=“Users”，可见。sync=“dialogVisible”）
el form.demo规则表单（：model=“editem”，状态图标，：rules=“formRules”，ref=“userForm”，label width=“140px”）
el表格项目（label=“Name”，prop=“firstName”）
el输入（v-model=“editem.name”，auto complete=“off”）
模板（v-if=“！changePassword”）
el表格项目
el按钮（@click=“changePassword=true”）是否更改密码？
模板（v-else）
el表格项目（标签=“密码”，道具=“密码”）
el输入（type=“password”，v-model=“editem.password”，auto complete=“off”）
el表单项（标签=“确认密码”，属性=“确认密码”）
el输入（type=“password”，v-model=“editem.confirmPassword”，auto complete=“off”）
.对话框页脚（slot=“footer”）
el按钮（type=“primary”，“click=“submitForm（'userForm'））保存
导出默认值{
名称：“对话框添加编辑用户”，
道具：{
对象，
},
数据（）{
const validatePass=（规则、值、回调）=>{
如果（值==''）{
回调（新错误（'请输入密码'））
}否则{
如果（this.confirmPassword！=''）{
此.refs.userForm.validateField（'confirmPassword'）为
}
回调函数（）
}
}
const validatePass2=（规则、值、回调）=>{
如果（值==''）{
回调（新错误（'请再次输入密码'））
}else if（值！==this.editem.password）{
回调（新错误（'2个输入不匹配！'））
}否则{
回调函数（）
}
}
返回{
格式规则：{
密码：[
{
验证程序：validatePass，
触发器：“模糊”
}
],
确认密码：[
{
验证程序：validatePass2，
触发器：“模糊”
}
]
},
dialogVisible:false，
更改密码：false，
编辑：{
名称：“”，
密码：“”，
确认密码：“”
}
}
},
方法：{
提交格式（formName）{
此.$refs[formName].validate（（有效）=>{
如果（有效）{
此.$emit（'save-item'））
console.log（'submit！'）
}否则{
console.log（'error submit！！'）
返回错误
}
})
}
}
}

好的，我想我理解问题所在

您的验证正在通过，但它没有检查

名称

和

密码

，只检查

密码更改

因此，如果您“…了解v-show和v-if的功能”，您将知道在使用

v-if

/

v-else

时元素并不存在。它们可以根据需要进行添加和删除

这是一个问题的原因是元素库在被添加时经历了一个初始化阶段。稍后使用

$ref

引用元素。查看

SubmitForm

，它使用“this.$refs[formName].validate”

因此，当您使用

v-if/v-else

时，由于元素不在那里，因此无法正确调用它们

你有两个选择，要么坚持使用

v-show

，这应该很容易，要么你可以使用我一直在利用的第三方库的一个漏洞，它不允许强制手动或自动重新加载。黑客程序包括在主元素中添加一个

键

。所以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"
>

---

似乎工作正常，你能澄清什么不工作吗？@Daniel，谢谢你的帮助。我不知道这对你有什么作用。另外，我在jsfiddle中通知您，您已经放置了两次
const validatePass
和
const validatePass2
，这与代码工作有关吗？而且，验证消息只显示在
确认密码
中。它们不需要出现两次，我只是将它们移到vue实例之外，忘记了删除。名称不起作用，因为您将道具定义为
prop=“firstName”
，但实际上它在其他任何地方都是
name
<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"
>