Within my <script> tag, I currently have the following code:
render(createElement) {
return createElement("form",
{ref: "formEl" ,
on: {submit: this.handleSubmit}
},
[ <insert create form inputs here> ]);
}
handleSubmit(e) {
e.preventDefault();
//Other stuff that also rely on using e
}
When a submit button is placed inside the form, handleSubmit works perfectly. However, if I were to use this.$refs.formEl.submit(), HandleSubmit does not run.
I tried a solution mentioned in: VueJs 2 - preventDefault() on $refs.form.submit()
By adding an event listener like this:
this.$refs.form.addEventListener("submit", this.handleSubmit);Unfortunately, this approach did not solve the issue.
Edit (After Comments):
To explain further about why it "did not work":
when clicking a submit button within the <form> tags, HandleSubmit() actually runs twice (possibly due to adding a listener twice)
I added some console.log() statements to handlesubmit and noticed nothing displayed on the console.
The component is written in Typescript using classes, and I am certain it is located in the equivalent of the methods section of the component for typescript: (inside
export default class ClassName extends Vue {}What I observed is that when attaching a button outside the <form> tag that triggers the submit() method on the reference, the default action of updating the URL with the form contents occurs.