modal-dialog - 使用Vue js验证后如何关闭模态？

Question

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

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

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

Answer 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)'>

希望这可以帮助！