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。

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>

当你触发input事件时，$event 是当前的事件对象。

$event.target.value指向的是当前的input的值。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue 富文本编辑器tinymce的安装配置使用教程
TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成,TinyMCE是一个根据LGPL license发布的自由软件,你可以把它用于商业应用,这篇文章主要介绍了Vue 富文本编辑器tinymce的安装教程,需要的朋友可以参考下
2023-09-09
vue中如何去掉input前后的空格
这篇文章主要介绍了vue中如何去掉input前后的空格问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
Vue-ANTD表单输入中自定义校验一些正则表达式规则介绍
这篇文章主要介绍了Vue-ANTD表单输入中自定义校验一些正则表达式规则介绍,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01
Vue项目使用px2rem方法示例详解
这篇文章主要为大家介绍了Vue项目使用px2rem的方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
详解vue中多个有顺序要求的异步操作处理
这篇文章主要介绍了vue中多个有顺序要求的异步操作处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
vue 开发之路由配置方法详解
这篇文章主要介绍了vue 开发之路由配置方法,结合实例形式详细分析了了vue.js路由原理、配置方法及相关操作注意事项,需要的朋友可以参考下
2019-12-12
Nuxt升级2.0.0时出现的问题(小结)
这篇文章主要介绍了Nuxt升级2.0.0时出现的问题(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
vue组件间通信六种方式（总结篇）
组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。这篇文章主要介绍了vue组件间通信六种方式,需要的朋友可以参考下
2019-05-05
Vue子组件内的props对象参数配置方法
这篇文章主要介绍了 Vue 子组件内的 props 对象里的 default 参数是如何定义Array、 Object 、或 Function 默认值的正确写法说明，感兴趣的朋友跟随小编一起看看吧
2022-08-08
vue使用element-ui的el-date-picker设置样式无效的解决
本文主要介绍了vue使用element-ui的el-date-picker设置样式无效的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-03-03