解决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阻止事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
这篇文章主要介绍了Vue 基于 vuedraggable 实现选中、拖拽、排序效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
vue出现Uncaught SyntaxError:Unexpected token问题及解决
这篇文章主要介绍了vue出现Uncaught SyntaxError:Unexpected token问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
本文主要介绍了vue $attrs和$listeners的使用与区别，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
通过vue-cli来学习修改Webpack多环境配置和发布问题
这篇文章主要介绍了随着Vue-cli来'学'并'改'Webpack之多环境配置和发布的相关知识,本文将会根据一些实际的业务需求，先学习vue-cli生成的模版，然后在进行相关修改，感兴趣的朋友一起跟着小编学习吧2017-12-12
这篇文章主要为大家介绍了Vue实例初始化为渲染函数设置检查源码剖析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
在 Vue 中,v-model 是一个常用的指令,用于实现表单元素和组件之间的双向绑定,当我们使用原生的表单元素时,直接使用 v-model 是很方便的,本文给大家介绍了Vue自定义组件实现 v-model 的几种方式,需要的朋友可以参考下2024-02-02
下面小编就为大家分享一篇基于vue中解决v-for使用报红并出现警告的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Ant Design Vue是使用Vue实现的遵循Ant Design设计规范的高质量UI组件库,用于开发和服务于企业级中后台产品,下面这篇文章主要给大家介绍了关于vue中ant-design-vue组件安装与使用的相关资料,需要的朋友可以参考下2022-04-04
使用组件库时,图标往往不能满足需求,所以我们常常需要用到第三方图标库,这篇文章主要给大家介绍了关于vue引入iconfont的相关资料,需要的朋友可以参考下2021-06-06
在 Vue 的项目中，我们经常会遇到 v-if、v-show、v-for 或 v-model 这些内置指令，它们为我们提供了不同的功能。除了使用这些内置指令之外，Vue 也允许注册自定义指令。接下来，将使用Vue 3官方文档自定义指令章节中使用的示例，来一步步揭开自定义指令背后的秘密。2021-05-05
最新评论