1

Does anyone know how I can submit a sign out form in Vue 3 only when a function is called? I have inserted related code below:

<form
@submit.prevent="handleSignOut($event)"
method="post"
action="/logout">
<input type="hidden" name="_token" :value="csrf">
<button type="submit">
Sign out
</button>
</form>

// handle sign out
const handleSignOut = function (e) {
// submit sign out here
}
Qais Wardag
  • 63
  • 2
  • 9
  • Yes. Do `e.currentTarget.submit()`: see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit – Terry Sep 29 '22 at 20:52
  • Does this answer your question? [How can I submit a form using JavaScript?](https://stackoverflow.com/questions/9855656/how-can-i-submit-a-form-using-javascript) – Terry Sep 29 '22 at 20:53
  • You need to change `@submit.prevent` to `@submit` because the `prevent` modifier will call `preventDefault` that prevents the form from submitting – Duannx Sep 30 '22 at 02:08

1 Answers1

2

if you're using javascript:

  1. add a tag ref on your html form <form ref="myForm" @submit.prevent="handleSignOut($event)" method="post" action="/logout">
  2. this.$refs.myForm.submit()

if you'e using typescript:

  1. add a tag ref on your html form <form ref="myForm" @submit.prevent="handleSignOut($event)" method="post" action="/logout">
  2. you need to declare const myForm = ref<HTMLFormElement>()
  3. myForm.value.submit();
Rodrigo Klim
  • 96
  • 1
  • 3