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

我正在使用<q-modal>（Quasar Framework）表单。点击Add按钮，表格会弹出。在这里，我点击提交按钮后验证每个表单标签。要关闭模式，我使用@click="$refs.maximizedModal.close()"作为提交按钮。如何使用Vue js进行验证后关闭模态？

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

是否有任何方法可以在Vue js中进行条件提交？

来源

2017-08-28 Darshan theerth

你应该为表单的提交和使用这样的自定义函数，东西：

....

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 
    } 
    } 
}

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

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

希望这有助于！

来源

2017-08-28 13:36:52

$ refs.maximizedModal.close（）和这个$ refs.maximizedModal.close（）都会出错。错误是 - this。$ refs.maximizedModal不是函数。 –

如果“this。$ refs.maximizedModal.close（）”不是一个函数，那么也许你没有正确访问maximizedModal对象。在这种情况下，你应该在当前的组件中有一个组件，像。如果没有找到这样的标签，就会出现像你这样的错误。如果最大化模态不是该组件的子项，那么将无法以这种方式访问它。请记住，@ click =“$ refs.maximizedModal.close（）”与在vuejs组件中的方法内定义“this。$ refs.maximizedModal.close（）”相同。 –

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

回答

相关问题