vue中使用event.target.value踩坑记录
更新时间：2024年03月24日 08:56:50 作者：pnpnpna
这篇文章主要介绍了vue中使用event.target.value踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
使用event.target.value踩坑
问题
原本是要用三个按钮显示后端获取的数据，点击按钮可以得到对应的值。
但是发现点击按钮有时有值，有时是 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 内显示的数字时，得到的是 undefned。
改为 currentTarget 后，不论是点击 button 还是数字，指向的都是 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>
当你触发input事件时，$event 是当前的事件对象。
$event.target.value指向的是当前的input的值。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue如何实现跨页面传递与接收数组并赋值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
在实际开发中我们会遇到不确定高度的情况,下面这篇文章主要给大家介绍了关于uniapp和vue如何获取屏幕或盒子内容的宽高,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-02-02
本文主要介绍了Vue实现液态玻璃登录卡片,包括多层叠加、SVG滤镜、3D倾斜交互等技术,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-06-06
NProgress 作为一款轻量级的进度条库,凭借其简洁的设计和良好的兼容性,被广泛应用于各类 Web 项目中,本文将详细介绍如何在 Vue3 项目中优雅地集成和使用 NProgress,希望对大家有所帮助2026-04-04
项目中需要制作一个双击编辑单击选中可删除Tag标签,本文就来介绍一下如何实现,具有一定的参考价值,感兴趣的可以了解一下2023-09-09
Vue中的element tabs点击锚点定位,鼠标滚动定位
这篇文章主要介绍了Vue中的element tabs点击锚点定位,鼠标滚动定位方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输。重点给大家介绍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项目从本地环境部署到线上服务器,包括打包本地项目、服务器环境搭建、项目上传与配置以及解决部署后页面访问异常问题2026-02-02
最新评论