vue中使用event.target.value踩坑記錄
使用event.target.value踩坑
問(wèn)題
原本是要用三個(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來(lái)獲取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)文章
TinyMCE是一個(gè)輕量級(jí)的基于瀏覽器的所見(jiàn)即所得編輯器,由JavaScript寫成,TinyMCE是一個(gè)根據(jù)LGPL license發(fā)布的自由軟件,你可以把它用于商業(yè)應(yīng)用,這篇文章主要介紹了Vue 富文本編輯器tinymce的安裝教程,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue中如何去掉input前后的空格問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue-ANTD表單輸入中自定義校驗(yàn)一些正則表達(dá)式規(guī)則介紹
這篇文章主要介紹了Vue-ANTD表單輸入中自定義校驗(yàn)一些正則表達(dá)式規(guī)則介紹,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要為大家介紹了Vue項(xiàng)目使用px2rem的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了vue中多個(gè)有順序要求的異步操作處理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了vue 開發(fā)之路由配置方法,結(jié)合實(shí)例形式詳細(xì)分析了了vue.js路由原理、配置方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-12-12
Nuxt升級(jí)2.0.0時(shí)出現(xiàn)的問(wèn)題(小結(jié))
這篇文章主要介紹了Nuxt升級(jí)2.0.0時(shí)出現(xiàn)的問(wèn)題(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
組件是 vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互引用。這篇文章主要介紹了vue組件間通信六種方式,需要的朋友可以參考下2019-05-05
Vue子組件內(nèi)的props對(duì)象參數(shù)配置方法
這篇文章主要介紹了?Vue?子組件內(nèi)的??props?對(duì)象里的?default?參數(shù)是如何定義Array、?Object?、或?Function?默認(rèn)值的正確寫法說(shuō)明，感興趣的朋友跟隨小編一起看看吧2022-08-08
vue使用element-ui的el-date-picker設(shè)置樣式無(wú)效的解決
本文主要介紹了vue使用element-ui的el-date-picker設(shè)置樣式無(wú)效的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03