el-switch的change事件刷新页面和打开调试窗口会无限调用问题

最新推荐文章于 2025-04-22 13:19:14 发布
原创 最新推荐文章于 2025-04-22 13:19:14 发布 · 1.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #elementui

文章讲述了在前端开发中遇到的一个问题，即在页面刷新或使用调试窗口时，接口会被不必要地多次调用。为了解决这个问题，作者提出了一种解决方案，即通过在外层添加一个div，并给它绑定click事件来控制接口的调用，从而避免了不必要的请求。

1. 原代码

在这里插入图片描述

2. 问题

刷新页面或者打开调试窗口上下拉动的时候会调用好几次接口
在这里插入图片描述

3. 解决方式

在外面包一层div，再用click事件

在这里插入图片描述

o0麦嘎
关注
Vue3 - Element Plus 开关组件 el-switch 首次加载或刷新页面时出现“自动执行一次change事件“问题，Switch开关初次加载会自动触发change，无法将值设为布尔值！
🏆 前端领域优质创作者
07-31 1万+
vue3，elementPlus，组件库，开关，el-switch，组件，Switch开关，change事件，switch状态发生变化时的回调函数，第一次就触发，就首次加载的时候触发一次，自动就执行了一次change，如何解决这个问题，把值改成true和false也不行，boolean布尔值，数值型，无法保证v-model是布尔值(true/false)，但又不能在里面写表达式怎么办，初次加载会自动执行change事件，第一次会加载或刷新会触发change的解决办法，三元表达式，表格table，还是不
vue3+element-plus 项目中 el-switch 刷新后自动触发change？坑就藏在这里！
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
03-14 885
el-switch组件的和必须和v-model绑定的值类型一致如果没有加，那么它们是字符串，可能会触发@change事件遇到@change刷新后自动触发的问题，优先检查数据类型是否匹配这个问题看似简单，但实际上是官方的默认行为，所以遇到这种坑，先去 GitHub issue 搜一下，可能就能少踩点坑 😆。
element ui switch开关 点击按钮后，弹窗确认再改变开关状态
热门推荐
ymumi的博客
11-14 2万+
<el-switch v-model="autoUpdate" active-color="#5eb058" inactive-color="#cccccc" disabled @click.native="handleUpdate(autoUpdate)"> </el-switch> ...
Vue3 el-switch @change事件在初始化时会自动调用问题
sinat_23336093的博客
09-12 1853
接收一个vue3项目，突然有一天，table里有个switch开关，请求数据之后就开始执行switch的change事件，我还啥都没操作，就报一推重复请求。修改成一致都没问题，找到问题了又去试了下好了，原来是后端偷偷又把数据改回来了。去网上找了一大推，都说用before-change代替change。const rec = ref(0)修改成这样就不会初始化就执行。后来又去看了其他页面的写法，没有调用。
Vue3 + Element Plus项目中el-switch按钮效果
TianXuab的博客
08-10 3434
通过简单的示例代码，我们可以看到el-switch的基本用法和一些常见的属性和事件。可以通过安装element-plus库来获得el-switch组件，或者在项目中手动导入el-switch的源代码。在Vue3中，el-switch是一个非常有用的组件，它可以用于创建一个开关按钮，用于切换某个状态的开启和关闭。除了基本的用法，el-switch还提供了一些其他的属性和事件，以满足更多的需求。在上面的示例中，我们使用了v-model指令来绑定开关按钮的值到组件的data属性。
Vue3 el-switch @change事件在初始化时会自动调用问题处理
weixin_44190874的博客
05-31 2614
Vue3 el-switch @change事件在初始化时会自动调用问题处理
解决Element-Plus中el-switch的change方法自动触发问题
qq_41623635的博客
01-05 5885
getCurrentInstance()方法是Vue3 Composition API中的一个API函数。它的作用是返回一个组件实例对象，可以用来操作当前组件的各种属性和方法。这个方法是一个全局API，可以在任何地方使用。
精选资源
解决vue elementUI 使用el-select 时 change事件的触发问题
01-18
如下所示： <el v-model=level size=mini ...我们需要的是选择之后才触发，但是这样写你会发现，页面初始化的时候会触发多次，选择之后又会触发多次，原因是我们用错了标签，应该用 @change=”selectChange()
浅谈ElementUI中switch回调函数change的参数问题
10-18
这个事件会在组件状态变化时被触发，并且可以传递一个回调函数作为参数。 在回调函数中，我们通常可以接收一个参数，它代表了switch组件的新状态值，默认是布尔值。但是，如果页面中有多个switch组件，仅靠这个状态...
Vue3 el-switch @change事件在初始化时会自动调用问题处理的几种方法
Jinxiansen0211的博客
09-13 2485
本文介绍了Vue3中实现Switch状态切换确认弹窗的两种方法：1）推荐使用before-change拦截器，通过返回布尔值控制状态变更，适合支持该属性的组件；2）兼容性方案利用初始化标识跳过首次渲染，适用于不支持before-change的旧项目。两种方法均能防止误操作，但方法一控制更精准。文章还提供了完整代码示例和封装公共方法的建议。两种方案的对比显示，方法一适用于Vue3+现代组件库，方法二更适合兼容旧项目。
ElementPlus el-switch开关页面初始化时，change事件自动触发
红烧咸咸鱼
11-15 2251
ElementPlus el-switch开关页面初始化时，change事件自动触发。
elementPlus el-switch 初始化 @change事件自动触发
m0_68595471的博客
11-15 2970
如上图 后端如果userStatus赋值是 0或1 change事件是不会触发的。应该是你初始化赋值是null 控件自动给你改成了1 然后触发了 change事件。当后端返回null change自动触发 在change事件打印了一下。解决方法 换个思维 clikc事件 替换change事件。
el-switch自动触发更新事件
东逝水
05-23 1585
就是进入这个列表时会发送n个修改状态的请求，即没有点击el-switch就出发了修改状态的动作。经过一番思考后，我发现因为启用状态字段是这次新加的，接口默认返回的是null，我猜测el-switch会自动把null改成false，因此就触发了update:modelValue。希望在更改el-switch状态时能够有个弹框做二次确认，没问题，el-switch已经帮我们想到了，所以它提供了beforeChange，根据beforeChange的结果来决定是否修改状态。
el-switch
qq_50276105的博客
11-25 8032
2、如果说你要用id值来判断是否要把开关禁用，那么是无法达到目的的，因为在项目中，开关是开的时候，id传入"a"值 ，开关是关的时候，id被传入"b"值。根据其先改后传的特点，就无法达到禁用的效果了。1、如果此时开关是开着的，也就是说id值是"a"，那么当我们出发change事件的时候，传过去的id值是关闭的“b”值。3、在判断是否会被禁用中，可以选择其他的字段来做判断。
vue3+element-plus 项目中 el-switch 刷新后自动触发change
weixin_61195170的博客
04-22 2011
的首次状态渲染视为一次“有效变更”，导致页面加载或刷新时自动触发。若数据源来自接口，需在赋值前进行类型和值校验。自动触发事件的问题，同时保持代码简洁性和可维护性。初始值不一致，组件初始化时会因状态变更自动触发。+ Element Plus 的后台管理中使用。只会在手动切换时触发，但是页面一刷新就执行。此方法可规避初始化时的意外触发。绑定的初始值是否严格等于。通过上述方案，可针对性解决。，使接 口被请求。
el-switch组件回显时自动触发change事件问题解决
Z_Joker_J的博客
03-06 516
2、在switch上添加 :active-value="1" :inactive-value="0"。1、回显时，将status字段从0、1变成true、false。
el-select的change事件初多次触发
m0_49014420的博客
08-20 481
el-select的change事件初多次触发
vue点击el-switch开关，弹出提示框（点击事件js触发弹框）
爱意迷了眼丶的博客
05-26 2213
【代码】vue点击el-switch开关，弹出提示框（点击事件js触发弹框）
ElementUI：页面初始化el-switch被触发change事件问题
alicezjlwn的博客
03-26 1751
页面初始化时el-switch被触发change事件，看返回数据是否与active-value、inactive-value配置相同，注意字符串、数字区别，不同会导致该问题。控制台查看后端返回结果。
el-table 与操作栏的el-switch change 事件冒泡问题
最新发布
06-20
### 解决方案 在 `el-table` 中使用 `el-switch` 时，如果需要解决 `change` 事件冒泡问题，可以通过以下方式实现。以下是具体方法和代码示例： #### 方法一：通过 `@click.stop.native` 阻止冒泡 在 Vue 的事件修饰符中，`.stop` 可以阻止事件冒泡，而 `.native` 则用于监听组件根元素的原生事件。因此，可以在 `el-switch` 上添加 `@click.stop.native` 来阻止点击事件冒泡到父级元素[^1]。 ```html <el-table :data="tableData" @cell-click="onCellClick"> <el-table-column type="index" label="序号" width="55"></el-table-column> <el-table-column label="状态" align="center"> <template slot-scope="scope"> <el-switch v-model="scope.row.status" @change="data => onStateChange(scope.row, data)" @click.stop.native ></el-switch> </template> </el-table-column> </el-table> ``` #### 方法二：通过 `@click.stop` 包裹 `el-switch` 另一种方式是将 `el-switch` 包裹在一个 `span` 或其他标签中，并在该标签上添加 `@click.stop`，从而阻止冒泡事件[^2]。 ```html <el-table :data="tableData" @cell-click="onCellClick"> <el-table-column type="index" label="序号" width="55"></el-table-column> <el-table-column label="状态" align="center"> <template slot-scope="scope"> <span @click.stop> <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)" ></el-switch> </span> </template> </el-table-column> </el-table> ``` #### 方法三：在 `change` 事件中手动停止冒泡 如果上述方法无法满足需求，还可以在 `change` 事件的回调函数中手动调用 `event.stopPropagation()` 来阻止事件冒泡[^4]。 ```html <el-table :data="tableData" @cell-click="onCellClick"> <el-table-column type="index" label="序号" width="55"></el-table-column> <el-table-column label="状态" align="center"> <template slot-scope="scope"> <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="(val) => handleStatusChange(val, scope.row, $event)" ></el-switch> </template> </el-table-column> </el-table> ``` ```javascript methods: { handleStatusChange(val, row, event) { event.stopPropagation(); // 手动阻止冒泡 console.log('状态改变', val, row); } } ``` ### 注意事项 - 如果使用的是 Vue 3，则 `.native` 修饰符已被移除，需通过 `v-on` 的 `modelValue` 属性或其他方式替代[^3]。 - 确保 `el-switch` 的 `v-model` 绑定值与数据模型一致，否则可能导致状态更新异常。 ---
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值