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

本篇文章为大家展示了如何解决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

Vue是一款友好的、多用途且高性能的javascript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的html、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

上述内容就是如何解决vue change阻止默认事件问题，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网精选频道。