解决vue change阻止默认事件问题
更新时间：2022年01月17日 10:20:22 作者：Travelerᘗ
这篇文章主要介绍了vue change阻止默认事件问题,使用事件 @click.stop.native.prevent 解决 (使用@click.stop 或者 @click.prevent都无效，直接报错还阻止不了事件)，需要的朋友可以参考下
背景：复选框内部有个数量增减选项，并且两个都是change事件。当触发内部数量增减事件时，外部的复选change事件也会触发，体验很不好。
使用事件 @click.stop.native.prevent 解决 (使用@click.stop 或者 @click.prevent都无效，直接报错还阻止不了事件)
<el-checkbox-group
v-model="checked_list"
@click.stop
@change=checkedFn>
<el-checkbox v-for="(item,index) in listData" :label="index" :key="index" class="checkbox_shop_car">
<div class="shop_list">
<div><label>props_name:</label>{{item.props_name}}</div>
<div><label>类型:</label>{{item.name_suffix}}</div>
<div><label>数量:</label>
<el-input-number size="mini" v-model="item.number"
@change="handleChange(item)" :min="1" @click.stop.native.prevent></el-input-number>
</div>
</div>
<div @click="deleteFn(item.id)" class="delete_icon">×</div>
</el-checkbox>
</el-checkbox-group>效果
图中绿色框和橙色框的change事件不会互相干扰，解决。。
没有人能一路单纯到底，但是要记住，别忘了最初的自己!
到此这篇关于解决vue change阻止默认事件问题的文章就介绍到这了,更多相关vue阻止事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项,下面这篇文章主要给大家介绍了关于Vue组件如何设置Props的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue全局环境变量和模式的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
本文通过实例代码给大家介绍了vue中的ElementUI的使用，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-10-10
最近接触了vue.js,一度非常好奇vue.js是如何监测数据更新并且重新渲染页面,这篇文章主要给大家介绍了关于Vue源码学习之响应式是如何实现的相关资料,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了Vue-组件自定义事件的绑定和解绑，文中有详细的图文实例，对学习或工作有一定的参考价值，需要的小伙伴可以阅读下2023-05-05
这篇文章主要介绍了vue.js在标签属性中插入变量参数的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-03-03
轮播图在开发中是经常用到的,3D轮播图是其中最常用的一种,所以在这篇文章中将给大家介绍Vue + AnimeJS实现3d轮播图,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了vue实现文章点赞和差评功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家介绍了Vue之mixin混入，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
这篇文章主要为大家详细介绍了vue使用better-scroll实现下拉刷新、上拉加载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
最新评论