「本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!」
今天正好团队中的一个成员碰到了一个比较恶心的问题,自己处理半天无果,大家不难发现,我们用的很多的组件他的BUG都很多,最多的我碰到的是BootStrap,目前已经弃用,本次采用的是element-ui,还是碰到了问题,最后他徒劳无果,还是让我来解决吧!
问题解析
问题是这样的:
- el-time-select修改时间值,但是视图不更新,值没问题,不影响数据传更新,恶心在于用户体验极差,会让用户觉得这个时间一直修改不了,会把电脑砸了,那最后怎么解决的呢?是这样做的
<el-time-select
v-model="form.TimeS"
:picker-options="{
start: '00:00',
step: '00:15',
end: '24:00'
}"
placeholder="开始时间"
></el-time-select>
他找了一些网上案例测试,结果差强人意,踩了这几个坑,大家就不要尝试了,我给大家列举出来:
- 有人提到的用$set()去解决,不知道是哪年的文章,尝试之后根本就没用,而且你需要绑定@blur的方法保证选择之后触发然后重新set,压根不好使!
- 采用重新赋值的方法,如果你尝试之后发现值根本不改变,哪怕你在组件上绑定的了ref
<el-time-select
v-model="form.TimeS"
ref="TimeChange"
:picker-options="{
start: '00:00',
step: '00:15',
end: '24:00'
}"
placeholder="开始时间"
></el-time-select>
你会惊奇的发现
this.$refs['TimeChange'].value
根本找不到值 value是“”。
-
你更诧异@chang方法触发不了,冰冻了!!!!!
解决方案
出现问题的原因?
因为el-time-select组件内绑定的V-model初始值定义在form表单内,所以无法实现视图更新,同时我们需要考虑表单提交时,这是一个必填项。
最优解
1、v-model的值直接定义在data.return的最外层
2、此时你会发现你的change方法可以用了(大家一定有疑问,为什么这么执着非要change事件,因为只有change可以发回当前选择的值,你不需要多余的代码)
template:
<el-time-select
@change="changeTimeS"
v-model="startTime"
ref="TimeChange"
:picker-options="{
start: '00:00',
step: '00:15',
end: '24:00'
}"
placeholder="开始时间"
></el-time-select>
初始化:
data(){
return{
startTime: '' =》一定放在最外层
}
}
changeTimeS(data){
console.log(data)
this.form.courseTimeS = data =》因为做了表单验证,在值改变的第一时间进行复制,变向通过了表单验证,无需单独写
console.log(this.$refs['TimeChange'].value) => 与data值相同
},
结语
组件的这种bug大家看的很简单,但是对于经验不足的会花费很多的时间解决问题,大家可能会说,最后就这么简单,但你要想想,在这个过程中不断的尝试,你看别人的文章,尝试。这都是你的时间成本,本次的方法不光可以更新视图,大家也无需再单独坐表单验证,那个会更花费时间,用表单自带的验证那你可能凉了!就这样简单的方法希望对大家有用,不要再尝试那些无用的帖子了。最最最最精华就在这里