使用Vue js验证后如何关闭模态？答案

【问题标题】：How to make modal close after validation using Vue js?使用Vue js验证后如何关闭模态？
【发布时间】：2018-02-05 08:34:22
【问题描述】：

我正在使用<q-modal>(Quasar Framework) 作为表单。单击Add 按钮时，将弹出一个表单。在此，我在单击提交按钮后验证每个表单标签。要关闭模式，我使用@click="$refs.maximizedModal.close()" 作为提交按钮。

一切正常。现在我需要保留模态，如果验证没有返回 true 或者如果验证满足则需要关闭模态。

有什么方法可以在 Vue js 中进行条件提交吗？

【问题讨论】：

标签： modal-dialog vuejs2 quasar

【解决方案1】：

您应该为表单的提交创建一个自定义函数并使用它，如下所示：

....

methods{
  checkForm(e){
    if(VALIDATION_IS_TRUE){
      //Validation has passed, we submit the form OR close the modal
      $refs.maximizedModal.close(); // Maybe this.$refs.maximizedModal.close()
      e.target.submit();
    }else{
       //The form is not validated, do something to inform the user
    }
  }
}

而不是使用 @click 作为提交按钮，将其添加到表单元素：

<form @submit.prevent='checkForm($event)'>

希望这会有所帮助！

【讨论】：

$refs.maximizedModal.close() 和 this.$refs.maximizedModal.close() 都出现错误。错误是 - this.$refs.maximizedModal 不是函数。
如果 "this.$refs.maximizedModal.close()" 不是一个函数，那么您可能没有正确访问最大化的Modal 对象。在这种情况下，您应该在当前组件中有一个组件，类似于。如果没有找到这样的标签，就会发生像你这样的错误。如果最大化模式不是该组件的子组件，您将无法以这种方式访问它。请记住，@click="$refs.maximizedModal.close()" 与在 vuejs 组件的方法中定义 "this.$refs.maximizedModal.close()" 相同。