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

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

相关推荐
charlee441 小时前
行业思考:不是前端不行,是只会前端不行
前端·ai
Amodoro2 小时前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs
Wcowin3 小时前
Mkdocs相关插件推荐(原创+合作)
前端·mkdocs
伍哥的传说3 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang4533 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
Trust yourself2433 小时前
想把一个easyui的表格<th>改成下拉怎么做
前端·深度学习·easyui
苹果醋34 小时前
iview中实现点击表格单元格完成编辑和查看(span和input切换)
运维·vue.js·spring boot·nginx·课程设计
武昌库里写JAVA4 小时前
iView Table组件二次封装
vue.js·spring boot·毕业设计·layui·课程设计
三口吃掉你4 小时前
Web服务器(Tomcat、项目部署)
服务器·前端·tomcat
Trust yourself2434 小时前
在easyui中如何设置自带的弹窗,有输入框
前端·javascript·easyui