如何让 Vue 的 element-ui validateField() 与 v-if 一起工作？

Question

请查看密码字段。Password和Confirm Password字段显示何时单击Change Password?按钮。

下面的代码正常工作，并按照v-show的预期验证表单，但在使用v-if时未验证。

我了解 v-show和 v-if的作用，以及 data(){}中的功能，这就是元素-UI文档中的方式。这是Doc的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>

Answer 1

好吧，我想我知道问题是什么。

您的验证正在通过，但没有检查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")