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中自定义右键菜单插件
这篇文章主要为大家详细介绍了vue中自定义右键菜单插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue实现滚动条下滑时隐藏导航栏,上滑时显示导航栏功能
这篇文章主要介绍了vue实现滚动条下滑时隐藏导航栏,上滑时显示导航栏,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-07-07
vue3使用video.js播放m3u8格式视频的操作指南
有时候我们需要播放 m3u8 格式的视频,或者实现视频播放器更多定制化需求,HTML 的 video 元素无法实现这些需求,这时候可以考虑使用 Video.js,本文给大家介绍了vue3使用video.js播放m3u8格式视频的操作指南,需要的朋友可以参考下
2024-07-07
如何重置vue打印变量的显示方式
这篇文章主要给大家介绍了关于如何重置vue打印变量显示方式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起看看吧。
2017-12-12
在vs code 中如何创建一个自己的 Vue 模板代码
这篇文章主要介绍了在vs code 中如何创建一个自己的 Vue 模板代码,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-11-11
vue实现简单数据双向绑定
这篇文章主要为大家详细介绍了vue实现简单数据双向绑定，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
vue2.0组件之间传值、通信的多种方式(干货)
这篇文章主要介绍了vue2.0组件之间传值、通信的多种方式以及注意要点，需要的朋友可以参考下
2018-02-02
VUE-ElementUI 自定义Loading图操作
这篇文章主要介绍了VUE-ElementUI 自定义Loading图操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue实现docx/xlsx/pdf等类型文件预览功能
这篇文章主要为大家详细介绍了如何溧阳Vue实现docx/xlsx/pdf等类型文件预览功能，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
2023-02-02
前端启动出现报错提示vue-cli-service serve的原因及解决办法
这篇文章主要给大家介绍了关于前端启动出现报错提示vue-cli-service serve的原因及解决办法,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
2023-11-11