如何使Vue的元素-ui validateField()与v-if一起使用?

时间:2018-03-27 18:41:55

标签: javascript vue.js vuejs2 element-ui

请查看密码字段。 <{1}}和Password字段会在点击Confirm Password按钮时显示。

下面的代码工作正常并使用Change Password?按预期验证表单,但在使用v-show时不会验证。

我理解v-ifv-show的作用,以及v-if中的函数,它们是元素ui文档中的函数。这是doc的网址:http://element.eleme.io/#/en-US/component/form#custom-validation-rules

data(){}

1 个答案:

答案 0 :(得分:1)

好的,我想我明白这是什么问题。

您的验证正在通过,但它未检查root@7ca161fc6292:/# curl -sSL https://google.com curl: (35) Unknown SSL protocol error in connection to google.com:443 name,仅检查password

所以如果你&#34; ...了解v-show和v-if是什么&#34;当您使用passwordChange / v-if时,您会发现这些元素不存在。根据需要添加和删除它们。

这是一个问题的原因是元素库在添加时会经历初始化阶段。稍后使用v-else引用该元素。看看$ref,它使用`this。$ refs [formName] .validate&#39;

因此,当您使用SubmitForm时,因为元素不在那里开始,所以它们将无法正确调用。

你有两个选择,要么坚持使用v-if/v-else,这应该很容易,或者你可以使用黑客攻击我一直在利用不允许强制手册的第三方库或自动重新加载。黑客包括向主元素添加v-show。所以html看起来像这样。

key

并且在哈巴狗

<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" >