Vue/Typescript：检查不是 HTMLInputElement 类型的属性

Posted 2023-02-16

【中文标题】Vue/Typescript：检查不是 HTMLInputElement 类型的属性

【英文标题】：Vue/Typescript: Checked is not a property on HTMLInputElement type

【发布时间】：2021-11-09 21:40:56

【问题描述】：

我有一个处理复选框检查的方法，但我在事件类型上遇到了target 的问题。

    <input
        @change="$emit('change', $event.target.checked)"
        @keyup.enter="boxCheck($event)"
        :checked="checked"
        ref="test-input"
        type="checkbox"
   />
////
    boxCheck($event: htmlInputElement) 
      if ($event?.target?.checked) 
        $event.target.checked = !$event.target.checked;
        this.$emit('change', $event.target.checked);
      
    ,

我的错误是 Property 'target' does not exist on type 'HTMLInputElement 但我认为只有 HTMLInputElement 可以用于此。

【问题讨论】：

请说明如何使用此功能。您可能不会将 HTMLInputElement 传递给您的函数，而是传递一个与用户操作相对应的事件。

@Ohgodwhy 刚刚更新了模板中的用法

【参考方案1】：

boxCheck 方法接收的是 Event 而不是 HTMLInputElement。您可以通过在方法中强制转换目标来根据您的使用情况得出元素的类型，如下所示：

boxCheck($event: Event) 
  const el = $event.target as HTMLInputElement

  // el.checked now holds reference to what you need