解决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中使用element日历组件的示例代码
这篇文章主要介绍了vue中如何使用element的日历组件，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2021-09-09
Vue中引入swiper报错的问题及解决
这篇文章主要介绍了Vue中引入swiper报错的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue3响应式Proxy与Reflect的理解及基本使用实例详解
这篇文章主要为大家介绍了vue3响应式Proxy与Reflect的理解及基本使用实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
Vue filter介绍及其使用详解
本篇文章主要介绍了Vue filter介绍及其使用详解，VueJs 提供了强大的过滤器API，能够对数据进行各种过滤处理。一起跟随小编过来看看吧
2017-10-10
element-ui tree结构实现增删改自定义功能代码
这篇文章主要介绍了element-ui tree结构实现增删改自定义功能代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue2.0结合Element实现select动态控制input禁用实例
本篇文章主要介绍了vue2.0结合Element实现select动态控制input禁用实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
Vue组件之间四种通信方式详解
vue框架提供了前端开发组件的思想，可以通过组件来组合成一个完整的页面，都是随着组件数量原来越多，组件之间难免需要相互通信。本文将为大家介绍四种组件间的通信方式，需要的可以参考一下
2022-01-01
vue-router跳转时打开新页面的两种方法
这篇文章主要给大家介绍了关于vue-router跳转时打开新页面的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue-router具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-07-07
Vue单页应用引用单独的样式文件的两种方式
这篇文章给大家介绍Vue单页应用如何引用单独的样式文件，本文以css文件为例，通过两种方式给大家介绍的非常详细，需要的朋友参考下吧
2018-03-03
Vue中的directive指令快速使用
这篇文章主要介绍了Vue中的directive指令快速使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10