I've implemented a form handler using its composable feature in my <script setup>:
const { submitForm, resetForm, handleSubmit, meta } = useForm()
function save() {
// Want to submit the form here
submitForm() // Not working
showSaveSnackbar.value = false
}
function discard() {
resetForm()
showSaveSnackbar.value = false
}
const onSubmit = handleSubmit(values => {
// pretty print the values object
alert(JSON.stringify(values, null, 2));
});
In my template, I have written:
<form @submit="onSubmit">
<!-- inputs -->
</form>
I have created a snackbar with a button that shows up (using useForm's meta.dirty). When editing the form and wanting to submit it, I intend to use this custom button instead of the HTML Form's Submit button (where the button calls the custom save() function).
Even though I tried using the submitForm() function, it did not work as expected.
Any suggestions on how to achieve this?