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

如何解决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 change阻止默认事件问题，你们学到知识或技能了吗？
[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[