在带有TypeScript的Vue中,SubmitEvent处理程序不可分配

tvmytwxo  于 2023-02-16  发布在  Vue.js
关注(0)|答案(1)|浏览(108)

我正在使用带有TypeScript的Vue,我想给表单的submit事件分配一个submit处理函数。

<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>

然而,VS代码中的Volar给了我一个submit.prevent的错误,说:
类型“(e:SubmitEvent)=〉void”无法分配给类型“(有效负载:Event)=〉void '。参数'e'和'payload'的类型不兼容。ts(2322)
我应该怎么做呢?这个函数确实接收到一个SubmitEvent,但是TS说类型是错误的。

nue99wik

nue99wik1#

SubmitEvent接口基于Event接口,因此可以将Event强制转换为SubmitEvent;

function handleSubmit(e: Event) {
    const event = e as SubmitEvent;
    console.log(`Submitted: ${event.defaultPrevented}`);
}

相关问题