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)修改成这样就不会初始化就执行

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

相关推荐
Coder_Boy_几秒前
前端和后端软件系统联调经典问题汇总
java·前端·驱动开发·微服务·状态模式
PieroPC7 分钟前
NiceGUI .classes() 完整列表教程
前端
月巴月巴白勺合鸟月半7 分钟前
一个医学编码的服务
服务器·前端·javascript
ycgg12 分钟前
深入理解 DOM 的 dispatchEvent API
前端
方也_arkling13 分钟前
【JS】定时器的使用(点击开始计时,再次点击停止计时)
开发语言·前端·javascript
JS_GGbond14 分钟前
Vue原型链:让你的组件继承“超能力”
前端·vue.js
乆夨(jiuze)16 分钟前
不是所有的链式调用,都是Promise函数,Promise 规范及其衍生的 Promise/A+ 规范
前端·javascript·vue.js
锦瑟弦音23 分钟前
跑酷游戏开发笔记3 && 游戏开始场景 cocos 3.8.7
javascript·笔记·游戏
ttod_qzstudio31 分钟前
Vue 3 的魔法:用 v-bind() 让 CSS 爱上 TypeScript 常量
css·vue.js·typescript
MoonBit月兔31 分钟前
海外开发者实践分享:用 MoonBit 开发 SQLC 插件(其二)
开发语言·javascript·数据库·redis·mysql·moonbit