vue3(ts)類型EventTarget上不存在屬性value的問題
更新時(shí)間：2024年03月24日 09:37:46 作者：Gaojuncheng112
這篇文章主要介紹了vue3(ts)類型EventTarget上不存在屬性value的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue3(ts)類型“EventTarget”上不存在屬性“value”
記錄自己學(xué)習(xí)ts遇到的坑，幫助加強(qiáng)記憶。
問題
封裝自定義input組件，在獲取e.target.value時(shí)出現(xiàn)如下報(bào)錯(cuò)。類型“EventTarget”上不存在屬性“value”
const inputFn = (e: Event) => {
const val = e.target.value
emit("update:modelValue", val)
}
原因
e.target默認(rèn)為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開發(fā)時(shí)，注視事件響應(yīng)函數(shù)回調(diào)函數(shù)（例如onScroll）參數(shù)為Event時(shí)，使用e.target.clientHeight等會(huì)報(bào)錯(cuò)：
類型“EventTarget”上不存在屬性“clientHeight”。
解決方法
使用as進(jìn)行類型斷言
(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);
}
}}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用Split封裝通用拖拽滑動(dòng)分隔面板組件
這篇文章主要介紹了vue使用Split封裝通用拖拽滑動(dòng)分隔面板組件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue將某個(gè)組件打包成js并在其他項(xiàng)目使用
這篇文章主要給大家介紹了關(guān)于vue將某個(gè)組件打包成js并在其他項(xiàng)目使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
解決vue v-for 遍歷循環(huán)時(shí)key值報(bào)錯(cuò)的問題
今天小編就為大家分享一篇解決vue v-for 遍歷循環(huán)時(shí)key值報(bào)錯(cuò)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue?提供了雙向數(shù)據(jù)綁定機(jī)制,使得開發(fā)者可以輕松地將表單組件的值與?Vue?實(shí)例中的數(shù)據(jù)進(jìn)行關(guān)聯(lián),本文將詳細(xì)介紹如何在?Vue?中使用這些表單組件,并實(shí)現(xiàn)雙向數(shù)據(jù)綁定,需要的可以參考下2024-03-03
Vue3中reactive變量重新賦值無法響應(yīng)的3種處理方法
這篇文章主要給大家介紹了關(guān)于Vue3中reactive變量重新賦值無法響應(yīng)的3種處理方法,在Vue3中可以使用reactive函數(shù)將一個(gè)普通對(duì)象轉(zhuǎn)換為響應(yīng)式對(duì)象,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue3請(qǐng)求攔截器里如何配置token,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue.extend 登錄注冊(cè)模態(tài)框的實(shí)現(xiàn)
這篇文章主要介紹了Vue.extend 登錄注冊(cè)模態(tài)框的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要為大家詳細(xì)介紹了vue3.0手動(dòng)封裝分頁(yè)組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家介紹了DataV?全屏容器組件源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要為大家詳細(xì)介紹了Vue.js第四天的學(xué)習(xí)筆記，一個(gè)簡(jiǎn)單的組件示例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12