2017-08-28 59 views
0

我正在使用<q-modal>(Quasar Framework)表單。點擊Add按鈕,表格會彈出。在這裏,我點擊提交按鈕後驗證每個表單標籤。要關閉模式,我使用@click="$refs.maximizedModal.close()"作爲提交按鈕。如何使用Vue js進行驗證後關閉模態?

一切工作正常。現在我需要保留模態,如果驗證沒有返回true或驗證滿足,那麼模態需要關閉。

是否有任何方法可以在Vue js中進行條件提交?

回答

0

你應該爲表單的提交和使用這樣的自定義函數,東西:

....

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

希望這有助於!

+0

$ refs.maximizedModal.close()和這個$ refs.maximizedModal.close()都會出錯。錯誤是 - this。$ refs.maximizedModal不是函數。 –

+0

如果「this。$ refs.maximizedModal.close()」不是一個函數,那麼也許你沒有正確訪問maximizedModal對象。在這種情況下,你應該在當前的組件中有一個組件,像。如果沒有找到這樣的標籤,就會出現像你這樣的錯誤。如果最大化模態不是該組件的子項,那麼將無法以這種方式訪問​​它。請記住,@ click =「$ refs.maximizedModal.close()」與在vuejs組件中的方法內定義「this。$ refs.maximizedModal.close()」相同。 –