本篇文章为大家展示了如何解决vue change阻止默认事件问题,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
背景:复选框内部有个数量增减选项,并且两个都是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是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。
上述内容就是如何解决vue change阻止默认事件问题,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。