elementPlus el-switch 初始化 @change事件自动触发

已于 2023-11-15 13:32:43 修改
阅读量1.8k 收藏 1
点赞数 4
文章标签： 前端 javascript vue.js
于 2023-11-15 11:19:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68595471/article/details/134415869
版权 
<el-switch @change="confirm(row)"  v-model="row.userStatus" :active-value='0' :inactive-value='1' />

如上图 后端如果userStatus赋值是 0或1 change事件是不会触发的  

当后端返回null  change自动触发 在change事件打印了一下   

应该是你初始化赋值是null 控件自动给你改成了1  然后触发了 change事件 

解决方法 换个思维 click事件 替换change事件  

  <el-switch @click="confirm(row)"  v-model="row.userStatus" :active-value='0' :inactive-value='1' />

就完美解决了哈  

LJQI
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
解决vue elementUI 使用el-select 时 change事件的触发问题
01-18
如下所示： 我们需要的是选择之后才触发，但是这样写你会发现，页面初始化的时候会触发多次，选择之后又会触发多次，原因是我们用错了标签，应该用 @change=”selectChange()
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
element-plus中 el-switch组件初始化执行change方法（已解决！）
qq_42957741的博客
12-09 7225
element-plus第一次会加载或刷新会触发change的解决办法
Vue3 el-switch @change事件在初始化时会自动调用问题处理
最新发布
weixin_44190874的博客
05-31 517
Vue3 el-switch @change事件在初始化时会自动调用问题处理
【Element plus】switch踩过的坑
m0_67372185的博客
12-04 2398
switch踩过的坑，@change事件自动触发，状态渲染失效
解决使用el-switch的@change方法时初始就自动触发问题
前端小陈的成长记录
08-16 6398
el-switch
解决Element-Plus中el-switch的change方法自动触发问题
qq_41623635的博客
01-05 3612
getCurrentInstance()方法是Vue3 Composition API中的一个API函数。它的作用是返回一个组件实例对象，可以用来操作当前组件的各种属性和方法。这个方法是一个全局API，可以在任何地方使用。
vue的el-switch开关组件增加change监听事件
AVATAR
07-05 8357
vue的el-switch开关组件增加change监听事件
【react+ts】找不到less类型,Cannot find module ‘./xxx.module.less‘ or its corresponding type declarations
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
01-26 5305
问题描述 Cannot find module ‘./index.module.less’ or its corresponding type declarations 找不到less后缀名的类型 解决办法 在src目录下创建类型声明文件react-app-env.d.ts，并且声明less类型 内容如下 declare module '*.module.less' { const classes: { readonly [key: string]: string }; export de
vue3 ElementUI Switch @changechange事件初始化会被调用
Florenza的博客
11-29 3632
在vue3 Element-puls 中 初始化的时候@change会自动被调用。使用 :beforeChange 这个属性 但是这个属性。传值 如果直接传值依然会自动调用,
解决Vue对Element中的el-tab-pane添加@click事件无效
06-06
解决Vue对Element中的el-tab-pane添加@click事件无效
element-ui中select组件绑定值改变,触发change事件方法
01-21
1.安装vuecli脚手架 2.终端输入 cnpm i element-ui -S 安装element-ui 3.按需引入select组件 在main.js中写入如下代码 /* 导入第三方库开始 */ import 'element-ui/lib/theme-chalk/index.css';...
elementplus初始化页面的时候el-switch自动触发的问题解决方案
sdad2154的博客
09-19 1018
使用 :beforeChange 这个属性 但是这个属性。传值 如果直接传值依然会自动调用,
el-switch的change事件刷新页面和打开调试窗口会无限调用问题
Gpointy的博客
06-13 858
刷新页面或者打开调试窗口上下拉动的时候会调用好几次接口。
el-switch开关在表格中调用
热门推荐
weixin_44384605的博客
03-18 1万+
el-switch开关在表格中调用 效果图 注意：avue-switch在表格中用change事件可能会出现自动加载情况，用el-switch不会 1.加入el-switch标签并设置change事件 代码 <template slot="status" slot-scope="scope" > <el-switch on-value="true" off-value="false" v-model="scope
ElementPlus el-switch开关页面初始化时，change事件自动触发
红烧咸咸鱼
11-15 1239
ElementPlus el-switch开关页面初始化时，change事件自动触发。
Element-Plus Swtich Bug..@change自动被触发
花开的博客
07-07 4370
页面渲染完毕总是会触发一次@change,主要是因为active-value没有使用 bool类型,并且同样逻辑的代码在vue2中完全没有问题,不是eplus就是vue3的问题… <template> <!-- 定义后台欢迎页面 --> <div> <h1>我是后台欢迎页面</h1> <el-table :data="itemList" style="width: 100%" stripe border> .
Element-UI--＜el-switch＞的@change回调函数的参数用法
IT利刃出鞘的博客
11-14 5659
本文介绍Element-UI的的@change回调函数的参数用法。
el-switch change事件
07-28
el-switch 是 Element UI 中的一个开关组件，change 事件是当开关状态改变时触发的事件。你可以通过监听 change 事件来执行相应的操作。例如： ```html <el-switch v-model="switchValue" @change="handleSwitchChange"></el-switch> ``` 在上面的代码中，`v-model` 绑定了一个名为 `switchValue` 的变量，用于控制开关的状态。当开关状态改变时，会触发 `handleSwitchChange` 方法。 ```javascript methods: { handleSwitchChange(value) { // value 参数表示开关的最新状态，true 表示开启，false 表示关闭 if (value) { // 执行开关开启时的操作 console.log('开关已开启'); } else { // 执行开关关闭时的操作 console.log('开关已关闭'); } } } ``` 在 `handleSwitchChange` 方法中，可以根据 `value` 参数的值来执行相应的操作。当开关开启时，打印"开关已开启"；当开关关闭时，打印"开关已关闭"。你可以根据自己的需求来进行相应的操作。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值