I've created a form handler using its composable inside my <script setup>:
const { submitForm, resetForm, handleSubmit, meta } = useForm()
function save() {
// Here I want to submit the form
submitForm() // This doesn't work
showSaveSnackbar.value = false
}
function discard() {
resetForm()
showSaveSnackbar.value = false
}
const onSubmit = handleSubmit(values => {
// pretty print the values object
alert(JSON.stringify(values, null, 2));
});
And in my template I wrote this:
<form @submit="onSubmit">
<!-- inputs -->
</form>
I made a snackbar with a button that shows up (using useForm's meta.dirty attribute). When I edit the form and I want to submit it, I want to use this custom button instead of the HTML Form's Submit button (in this case the button calls the custom save() function).
I tried using the submitForm() function but without success.
How can I do this?
I think you can handle the form processing in the save function (and possibly remove the onSubmit function).
const { errors, values } = useForm();
const save = () => {
showSaveSnackbar.value = false
alert(JSON.stringify(values.value, null, 2));
};