I've encountered an issue while working with Vue and TypeScript. I am trying to attach a submit handler function to my form's submit event, but I keep getting an error in Volar on VS Code. Here is the code snippet from my component:
<script setup lang="ts">
function handleSubmit(e: SubmitEvent) {
console.log(`Submitted: ${e.defaultPrevented}`);
}
</script>
<template>
<div>
<h4>Create new</h4>
<div>
<form @submit.prevent="handleSubmit">
<button type="submit">Submit</button>
</form>
</div>
</div>
</template>
The error message from Volar states:
Type '(e: SubmitEvent) => void' is not assignable to type '(payload: Event) => void'. Types of parameters 'e' and 'payload' are incompatible.ts(2322)
Despite passing a SubmitEvent, TypeScript insists that there is a type mismatch. How can I resolve this discrepancy?