高防服务器

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


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

发布时间:2022-01-17 12:07:23 来源:高防服务器网 阅读:66 作者:柒染 栏目:开发技术

本篇文章为大家展示了如何解决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 成本,提升运维效率,使您更专注于核心业务创新。

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