如何在使用 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)'>

希望对您有所帮助！

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

How to make modal close after validation using Vue js?

modal-dialog

vuejs2

quasar