欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

解决vue change阻止默认事件问题

时间:2022-12-14 10:28:27|栏目:vue|点击:

背景:复选框内部有个数量增减选项,并且两个都是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事件不会互相干扰,解决。。

没有人能一路单纯到底,但是要记住,别忘了最初的自己!

上一篇:Ant-design-vue Table组件customRow属性的使用说明

栏    目:vue

下一篇:Vue中引入第三方JS库的四种方式

本文标题:解决vue change阻止默认事件问题

本文地址:http://www.codeinn.net/misctech/221339.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有