vue中使用event.target.value踩坑記錄
使用event.target.value踩坑
問題
原本是要用三個(gè)按鈕顯示后端獲取的數(shù)據(jù)，點(diǎn)擊按鈕可以得到對(duì)應(yīng)的值。
但是發(fā)現(xiàn)點(diǎn)擊按鈕有時(shí)有值，有時(shí)是 undefined。
代碼如下：
<el-row>
<el-button @click.native="chooseVal" :value="cone">{{ cone }}</el-button>
<el-button @click.native="chooseVal" :value="ctwo">{{ ctwo }}</el-button>
<el-button @click.native="chooseVal" :value="cthree">{{ cthree }}</el-button>
</el-row>
chooseVal: function (event) {
console.log("target: " + event.target.value);
}
原因
DOM 事件流分為 3 個(gè)階段：事件捕獲階段、目標(biāo)階段、冒泡階段。
target 在事件流的目標(biāo)階段，currentTarget 在事件流的捕獲，目標(biāo)及冒泡階段。
只有當(dāng)事件流處在目標(biāo)階段的時(shí)候，兩個(gè)的指向才是一樣的， 而當(dāng)處于捕獲和冒泡階段的時(shí)候，target 指向被單擊的對(duì)象而 currentTarget 指向當(dāng)前事件活動(dòng)的對(duì)象 (注冊(cè)該事件的對(duì)象)。
因此，當(dāng)點(diǎn)擊到 button 時(shí)，是可以獲取到值的，而當(dāng)點(diǎn)擊到 button 內(nèi)顯示的數(shù)字時(shí)，得到的是 undefned。
改為 currentTarget 后，不論是點(diǎn)擊 button 還是數(shù)字，指向的都是 button。
使用$event.target.value來獲取input的值
<template>
<div class="input_group">
<label :for="name">{{name}}</label>
<input
:type="type"
:value = "value"
:placeholder="placeholder"
:name = "name"
@input="$emit('input',$event.targer.value)"
>
</div>
</template><script>
export default {
name : 'input_group',
props : {
type :String,
default : 'text'
},
value : String,
placeholder :String,
name : String,
}
</script>
當(dāng)你觸發(fā)input事件時(shí)，$event 是當(dāng)前的事件對(duì)象。
$event.target.value指向的是當(dāng)前的input的值。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue如何實(shí)現(xiàn)跨頁面?zhèn)鬟f與接收數(shù)組并賦值
這篇文章主要介紹了vue如何實(shí)現(xiàn)跨頁面?zhèn)鬟f與接收數(shù)組并賦值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在實(shí)際開發(fā)中我們會(huì)遇到不確定高度的情況,下面這篇文章主要給大家介紹了關(guān)于uniapp和vue如何獲取屏幕或盒子內(nèi)容的寬高,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
Vue實(shí)現(xiàn)液態(tài)玻璃登錄卡片的效果示例
本文主要介紹了Vue實(shí)現(xiàn)液態(tài)玻璃登錄卡片,包括多層疊加、SVG濾鏡、3D傾斜交互等技術(shù),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-06-06
從入門到精通詳解Vue3如何集成NProgress進(jìn)度條
NProgress?作為一款輕量級(jí)的進(jìn)度條庫,憑借其簡潔的設(shè)計(jì)和良好的兼容性,被廣泛應(yīng)用于各類?Web?項(xiàng)目中,本文將詳細(xì)介紹如何在?Vue3?項(xiàng)目中優(yōu)雅地集成和使用?NProgress,希望對(duì)大家有所幫助2026-04-04
項(xiàng)目中需要制作一個(gè)雙擊編輯單擊選中可刪除Tag標(biāo)簽,本文就來介紹一下如何實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
Vue中的element tabs點(diǎn)擊錨點(diǎn)定位,鼠標(biāo)滾動(dòng)定位
這篇文章主要介紹了Vue中的element tabs點(diǎn)擊錨點(diǎn)定位,鼠標(biāo)滾動(dòng)定位方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue中的$emit 與$on父子組件與兄弟組件的之間通信方式
本文主要對(duì)vue 用$emit 與 $on 來進(jìn)行組件之間的數(shù)據(jù)傳輸。重點(diǎn)給大家介紹vue中的$emit 與$on父子組件與兄弟組件的之間通信方式，感興趣的朋友一起看看2018-05-05
Vue-router是Vue的核心組件，主要是作為Vue的路由管理器，Vue-router默認(rèn)hash模式，通過引入Vue-router對(duì)象模塊時(shí)配置mode屬性可以啟用history模式，本文將通過代碼示例給大家詳細(xì)分析Vue路由History模式2023-06-06
這篇文章主要介紹了解決Vue router-link綁定事件不生效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue項(xiàng)目部署之從本地到線上環(huán)境實(shí)踐
文章詳細(xì)介紹了如何將Vue項(xiàng)目從本地環(huán)境部署到線上服務(wù)器,包括打包本地項(xiàng)目、服務(wù)器環(huán)境搭建、項(xiàng)目上傳與配置以及解決部署后頁面訪問異常問題2026-02-02