element from表单个别select 出现 一开始就校验了数据,且有数据还通不过校验,选中的项叉不掉问题。

问题1: element from表单个别select 出现 一开始就校验了数据,且有数据还通不过校验。
前提条件: 校验规则都设置正确,都设置prop rules等情况下出现这个问题。
下面是我设置的规则校验:
在这里插入图片描述

出现原因: 在页面数据回显时的数据赋值方式不正确导致的(不一定是这个位置赋值导致的,也有可能是其他地方赋值导致的)。
解决办法: 给深层次对象赋值时,使用this.$set来赋值。

拿这个courses来说原本是 this.list.courseTimes = [...autoCourseTimes]; 这样赋值的,改成在this.$set(this.list, 'courses', [...autoCourseResources]);使用这种方式赋值。

问题2:选中的项叉不掉问题。
也是像上面那种赋值方式导致的。虽然可以使用$forceUpdate()强行刷新视图,但是这样处理是不正确的,在一些特定极端场景下会有问题,治标不治本。
另外关于问题2: 假如由于业务需要将某个数据还原初始状态值/清空该值,不要乱设置值,把他设置成在data中定义的初始值就好了,这个也是非常重要,有可能在特定极端场景下导致未知问题。

总结:以上都是由于不正确赋值导致的, 在给深层次对象赋值时,使用this.$set来赋值。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值