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

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

相关推荐
XinZong16 分钟前
【AI社交】基于OpenClaw自研轻量化AI社交平台实战
前端
Le_ee41 分钟前
ctfweb:php/php短标签/.haccess+图片马/XXE
开发语言·前端·php
爱上好庆祝1 小时前
学习js的第七天(wed APIs的开始)
前端·javascript·css·学习·html·css3
KaMeidebaby2 小时前
卡梅德生物技术快报|冻干工艺开发:注射用心肌肽全流程参数优化与工程化方案
前端·其他·百度·新浪微博
ooseabiscuit2 小时前
Laravel6.x核心优化与特性全解析
android·开发语言·javascript
哆啦A梦15882 小时前
20, Springboot3+vue3实现前台轮播图和详情页的设计
javascript·数据库·spring boot·mybatis·vue3
Moment2 小时前
面试官:如果产品经理给你多个需求,怎么让AI去完成❓❓❓
前端·后端·面试
每天吃饭的羊2 小时前
JSONP
前端
gogoing2 小时前
ESLint 配置字段说明
前端·javascript
Lkstar3 小时前
面试官让我手写 Promise.all / Promise.race / Promise.allSettled,我直接水灵灵地写出来了
javascript·面试