vue3(ts)类型EventTarget上不存在属性value的问题

更新时间：2024年03月24日 09:37:46 作者：Gaojuncheng112

这篇文章主要介绍了vue3(ts)类型EventTarget上不存在属性value的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3(ts)类型“EventTarget”上不存在属性“value”

记录自己学习ts遇到的坑，帮助加强记忆。

问题

封装自定义input组件，在获取e.target.value时出现如下报错。类型“EventTarget”上不存在属性“value”

const inputFn = (e: Event) => {
    const val = e.target.value
    emit("update:modelValue", val)
}

原因

e.target默认为HTMLElement类型，是所有HTML元素类型的父类，不能确保身上一定有value属性。

因此需要断言成HTMLInputElement。

解决方式

const inputFn = (e: Event) => {
    const val = (<HTMLInputElement>e.target).value
    emit("update:modelValue", val)
}

或

const inputFn = (e: Event) => {
    const val = (e.target as HTMLInputElement).value
    emit("update:modelValue", val)
}

类型“EventTarget”上不存在属性“clientHeight”

使用ts开发时，注视事件响应函数回调函数（例如onScroll）参数为Event时，使用e.target.clientHeight等会报错：

类型“EventTarget”上不存在属性“clientHeight”。

解决方法

使用as进行类型断言

(e.target as HTMLElement).scrollHeight

例如：

onScroll={e => {
  if (
    (e.target as HTMLElement).scrollHeight - (e.target as HTMLElement).scrollTop <=
    (e.target as HTMLElement).clientHeight
  ) {
    getSriDetailList(true);
  }
}}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue脚手架项目创建步骤详解
这篇文章主要介绍了vue脚手架项目创建步骤详解，文章讲解的很清晰，初学者可以跟着步骤学习下
2021-03-03
vue实现简单全选和反选功能
这篇文章主要为大家详细介绍了vue实现简单全选和反选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
vue实现城市列表选择功能
这篇文章主要介绍了vue实现城市列表选择功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-07-07
Vue.js下拉菜单组件使用方法详解
这篇文章主要为大家详细介绍了Vue.js下拉菜单组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
vant如何修改placeholder样式
这篇文章主要介绍了vant如何修改placeholder样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
Vuex的store中的Module用法及说明
这篇文章主要介绍了Vuex的store中的Module用法及说明，具有很好的参考价值，希望对大家有所帮助。
2023-01-01
每天学点Vue源码之vm.$mount挂载函数
这篇文章主要介绍了vm.$mount挂载函数，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
Vue+elementUI实现动态展示列表的数据
这篇文章主要介绍了Vue+elementUI实现动态展示列表的数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
简单理解Vue中的nextTick方法
本篇文章主要介绍了简单理解Vue中的nextTick方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
解决node-sass安装报错无python等情况
在国内安装node-sass常因无法稳定连接GitHub而失败,解决方法包括手动下载对应的binding.node文件并放入缓存目录,操作步骤详细,适合非Python用户,无需额外环境配置
2024-10-10