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 個階段：事件捕獲階段、目標(biāo)階段、冒泡階段。

target 在事件流的目標(biāo)階段，currentTarget 在事件流的捕獲，目標(biāo)及冒泡階段。

只有當(dāng)事件流處在目標(biāo)階段的時候，兩個的指向才是一樣的，而當(dāng)處于捕獲和冒泡階段的時候，target 指向被單擊的對象而 currentTarget 指向當(dāng)前事件活動的對象 (注冊該事件的對象)。

因此，當(dāng)點擊到 button 時，是可以獲取到值的，而當(dāng)點擊到 button 內(nèi)顯示的數(shù)字時，得到的是 undefned。

改為 currentTarget 后，不論是點擊 button 還是數(shù)字，指向的都是 button。

button

console

使用$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事件時，$event 是當(dāng)前的事件對象。

$event.target.value指向的是當(dāng)前的input的值。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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