Vue3 el-switch @change事件在初始化时会自动调用问题

接收一个vue3项目,突然有一天,table里有个switch开关,请求数据之后就开始执行switch的change事件,我还啥都没操作,就报一推重复请求

javascript 复制代码
<template>
  <el-switch v-model="rec" inline-prompt :active-value="0" :inactive-value="1"
    active-text="是" inactive-text="否"  @change="switchChange(rec)"/>
</template>
<script setup>
import {ref} from 'vue'
const rec = ref(null)
const switchChange = (re)=> {
    console.log('执行',re)
}
</script>

去网上找了一大推,都说用before-change代替change

后来又去看了其他页面的写法,没有调用
对比了代码发现只要v-model给的初始值跟active-value和inactive-value类型和数据不一致就会调用

const rec = ref(0)修改成这样就不会初始化就执行

修改成一致都没问题,找到问题了又去试了下好了,原来是后端偷偷又把数据改回来了

相关推荐
Hello--_--World2 小时前
JS:this指向、bind、call、apply、知识点与相关面试题
开发语言·javascript·ecmascript
jserTang2 小时前
手撕 Claude Code-4: TodoWrite 与任务系统
前端·javascript·后端
腹黑天蝎座2 小时前
大屏开发必读:Scale/VW/Rem/流式/断点/混合方案全解析(附完整demo)
前端·javascript
jserTang2 小时前
手撕 Claude Code-5:Subagent 与 Agent Teams
前端·javascript·后端
于慨3 小时前
mac安装flutter
javascript·flutter·macos
踩着两条虫3 小时前
VTJ.PRO的平台介绍与特性
前端·架构·ai编程
光影少年3 小时前
前端工程化升级
前端·javascript·react.js·前端框架
Hello--_--World4 小时前
节流 VS 防抖 相关知识点与面试题
前端·javascript
We་ct4 小时前
AI辅助开发术语体系深度剖析
开发语言·前端·人工智能·ai·ai编程
去伪存真4 小时前
Superpowers 从“调教提示词”转向“构建工程规范”
前端·agent