el-form 表单重置resetField无效(v-if+resetField标签切换后再切回来重置无法生效)

本文探讨了在Vue.js中使用v-if与v-show进行组件切换时,表单重置行为的不同表现。当使用v-if时,表单重置可能会导致数据恢复到最初状态,而非清空。通过案例分析,指出了使用v-show代替v-if来解决这一问题的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

正常的表单重置,会清空表单数据和表单验证结果
在这里插入图片描述
在这里插入图片描述
问题描述:有两个功能块A,B可以点击来回切换,切换的实现就是通过v-if来决定展示哪一个。此时在展示A时给A表单的a输入框(使用了双向绑定)输入123,不点击重置,点击切换为B,此时再切换为A时,a输入框的数据为123,且点击重置无法生效,修改a输入框内容点击重置,输入框内容变成123。
大致效果:
在这里插入图片描述
由于v-if是标签的销毁和重新创建,所以在展示A时给a输入框赋的值会在A销毁并再重新创建后认为那是表单的默认值。
参考资料:
在这里插入图片描述

解决:将AB切换使用的v-if换成v-show

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值