Vue 中输入事件的类型有哪些

Pat*_*łaś 8 typescript vue.js nuxtjs

Vue 中输入事件的正确 Typescript 类型是什么?当我使用Event它时,缺少目标值或密钥或文件属性。

让我们举个例子:

<input @input="(e: MISSING_TYPE) => {}" />
<input @keypress="(e: MISSING_TYPE) => {}" />
Run Code Online (Sandbox Code Playgroud)

在 React 中,我们有类似ChangeEvent 的东西,它是通用的并且应用元素特定类型。我们在 Vue 中如何做到这一点?

Pat*_*łaś 23

感谢@steve16351在评论中的回答,有总结:

对于像按键这样的键盘事件,您可以使用 Event -> UIEvent -> KeyboardEvent 中更具体的事件:

<input @keypress="handleKeypress" />

handleKeypress(e: KeyboardEvent) { }
Run Code Online (Sandbox Code Playgroud)

对于更具体的事件,例如 HTMLInputElement 上的输入更改,您需要对其进行强制转换:

<input @input="handleInput" />

handleInput(e: Event) { 
  const target = (<HTMLInputElement>e.target)

  console.log(target.value)
}
Run Code Online (Sandbox Code Playgroud)

  • 这对我有用,尽管我必须将目标转换为:`const target = e.target as HTMLInputElement` (8认同)