关于v-for的坑
// 为了方便直接用大数组 小数组汉字代表 变量名了
大数组:[
{
id:1,
name:'小明',
小数组:[
{
age:18,
sex:'男'
}
]
},
{
id:2,
name:'小刚',
小数组:[
{
age:17,
sex:'男'
}
]
},
{
id:3,
name:'小红',
小数组:[
{
age:16,
sex:'女'
}
]
},
]
<!-- 这里大数组的每一项 里都有一个小数组 -->
<!-- 渲染页面:v-for大数组,同时也要 v-for 小数组中的数据 -->
这里踩的坑:
我先发请求拿到了 大数组 中的数据(这个数据不包括 小数组),然后直接保存到了组件自身。
这时,页面已经呈现了遍历 大数组 渲染后的效果。但是完整页面上还要遍历这个 大数组 中每一项的 小数组。
然后我又发请求拿到了 大数组 中的 小数组,接着将小数组 保存到 大数组的每一项里。然后.......这个小数组中的数据就一直不渲染到页面
但是 组件身上的数据是没有错误的,该拿到的都拿到了,mounted中请求完毕之后也都可以 得到完整的数据。
找啊找啊找bug.....一下午......
我用v-if控制了一下这个 小数组 的DOM元素 的显示和隐藏,默认让他先隐藏,然后等到全部数据拿到之后我再让他显示,
结果tmd好了 小数组 的数据也渲染出来了。
但是这样写不太好,因为涉及到两个请求,我让这两个请求都请求成功后,再把所有数据保存到自身,结果页面就没有任何毛病了
总结:当遇到v-for嵌套时,一定一定要把所有完整的数据都拿到后再让页面渲染数据
本文来自博客园,作者:ycccc丶,转载请注明原文链接:https://www.cnblogs.com/imycc/p/16621490.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~