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