vue3数据更新了,但是视图没有更新、下拉选择框数据更新了,视图还是没有数据(记录初次使用vue3的时候遇到的一些问题,以及解决办法)

前言:一直在学习vue3,但是一直没有机会使用,然后行情不好整个项目解散了,导致被迫失业,通过长达三个月的找工作终于找到了一份工作,工资还没有上家高,但是使用了vue3开发的项目,初次实战vue3,也遇到了两个比较有意义的问题,总结下

一、第一个问题
1、问题描述:

一个联动的下拉选择框,一个选择框的数据是前端定义的,第二下拉选择是通过第一个选择框的value 值去请求后端接口得到的。如图(因为其他原因,接口掉不通,先模拟一下)

但是请求得到了之后,打印数据也是更新了的,但是视图就是不更新,第二个下拉选择框里面就是没有数据,当修改文件之后呢去看又有了,网上搜索很多也没有收到合适的解决方法。

2、解决这个问题的经历

因为使用的antd-vue的UI,实在没有办法了,我就下了一个elementUI plus试了一下,奇怪的是elementUI plus能行???,如下图:

效果图下图:elementUI plus有视图,antd-vue没有,当elementUI选了之后,antd-vue就有数据了

上面都只是经历,虽然使用elementui 把整个antd-vue的form表单都替换了也能使用,但是一个项目使用两个UI框架不现实,会导致整个项目都变大。没有办法,还的继续想办法解决。

3、问题所在以及如何解决

后来终于找到问题所在了:是因为第二个下拉框的数据relatedPoolList使用reactive定义的,我是拿到了数据之后直接赋值了给relatedPoolList,如图

这样导致的结果是给 relatedPoolList 赋值了一个全新的不是响应式的数据,那么relatedPoolList就不在是响应式的了

解决办法:将 relatedPoolList 用ref定义,赋值的时候就是relatedPoolList.value == [xxx],当然还有其他的办法,只要不破坏relatedPoolList是个响应式的数据就行。如图

但是疑问还在,为什么elementUI plus能行?????

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

snows_l

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值