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

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

相关推荐
一 乐4 小时前
咖啡商城|基于springboot + vue咖啡商城系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·咖啡商城系统
学习使我健康4 小时前
Android 事件分发机制
android·java·前端
众少成多积小致巨4 小时前
libbinder_ndk 入门指南
前端·c++·架构
小李子呢02114 小时前
前端八股Vue---自定义组件(控件)
前端·javascript·vue.js
用户52709648744904 小时前
微前端(qiankun)单侧启动调试技巧
前端
于慨4 小时前
flutter基础组件用法
开发语言·javascript·flutter
斌味代码5 小时前
jQuery 内存泄漏排查:常见场景、工具使用与修复实战
前端·javascript·jquery
weixin199701080165 小时前
《爱回收商品详情页前端性能优化实战》
前端·性能优化
chenbin___5 小时前
鸿蒙(HarmonyOS)支持 useNativeDriver的详细说明(转自千问)
前端·javascript·react native·react.js·harmonyos
We་ct5 小时前
Git 核心知识点全解析
开发语言·前端·git·gitee·github