在 vuejs 中使用 $refs 验证多个 forms 需要帮助

Question

你好开发人员我是一个新人，我目前正在处理一项任务。 因为我在单个表单中使用了 3 个 forms，所以我可以验证对象的 object 但是当我尝试以嵌套方式验证它们时，只有第一个表单正在验证。 谁能给我一些建议来解决这个问题？ 上面这张图片是我用来验证嵌套 forms 的代码，但只有第一种形式正在验证。

Answer 1

我同意那些说您不应该提交文本图片的评论，并且您需要提供一个最小的可重现示例。 没有它，就无法查明特定的错误。

但是，这里有一些一般性的反馈。 一个问题是深度嵌套的代码不是干净的代码。 在我看来，您应该将逻辑分成更小的块，并以更线性的结构编写它，以便更容易进行故障排除。 你可以有这样的计算属性：

bankDetailsValid(){
  // bank details validation here
},
employeeDetailsValid(){
  // employee details validation here
},
# more specific validation can be in more computed properties
allFieldsValid(){
  // return this.bankDetailsValid && this.employeeDetailsValid # can add
  // whatever checks are needed here to determine if the form as a
  // whole can be submitted
},
errorMessage() {
  if (!this.bankDetailsValid) {
    return "Bank details error"
  }
  if (!this.employeeDetailsValid){
    return "Employee details error"
  }
  # more error messages would go in if-statements here. Then you would return a default error:
  return ""
}

另请记住，“formValidation”表明您的 function 做的不止一件事，因为它既要确定表单是否有效，又要确定错误消息是什么。 那太复杂了，所以会导致脏代码。 如果一个 function 做一件事，代码将更容易阅读和调试。