前端工作总结115-解决vue+el-element二级联动,选项选择后不显示的问题
2024-06-12 09:26:30 阅读次数:32
elementui,vue,前端
一、问题描述
vue的二级联动可以采用v-if的方式去实现,也就是在第一级选项的值发生变化后,
清空第二级选项所关联的model的值,并将第二级选项所取的变量数组变更。会产生的问题是,
第二级选项的值有时候会出现值已改变但是页面上并不显示改变值的情况。
二、跟踪问题
产生问题的原因为vue是基于数据驱动的,这么做有可能会导致数据刷新不及时
。如果要测试去跟踪问题的原因,可以在第二级的el-select中写上@change方法,
可以看到当改变选项值后,该el-select的value是发生变化了,但是在页面中无法显示。
三、解决方式
给第二级el-select的@change关联方法中加入一行代码,以下为伪代码:
<el-select v-model="status" clearable @change="updateFun">
</el-select>
updateFun() {
this.$forceUpdate();
}
这样,在每次更改第二级选项的值后,调用方法,执行“this.$forceUpdate();”即可
版权声明:本文内容来自第三方投稿或授权转载,原文地址:https://blog.51cto.com/u_15460007/6051098,作者:前端导师歌谣,版权归原作者所有。本网站转在其作品的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如因作品内容、版权等问题需要同本网站联系,请发邮件至ctyunbbs@chinatelecom.cn沟通。
上一篇:前端-vue基础98-vue router动态路由匹配
下一篇:对于Servlet原理以及Mapping的五种映射和404页面的详解