vue v-for遍历集合时获取不到孙子层属性

最新推荐文章于 2024-01-24 17:34:24 发布
最新推荐文章于 2024-01-24 17:34:24 发布
阅读量660 收藏 1
点赞数
文章标签： vue java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43553882/article/details/109688861
版权

一、问题背景

这段时间在写一个vue+springboot项目的时候，遇到了一个问题，我在后台传递过来了一个Comment（评论）的list对象，同时user（用户）类作为comment的属性被封装在comment的list对象中一起被带到前台页面，可是在前台却报错，说我的user中的userAvatar（用户头像）是未定义的。
在这里插入图片描述

在这里插入图片描述

二、 问题解决

于是我在前台网页控制台尝试打印了下返回的数据，可以看到是有返回值的，但是在页面确实无法显示。后来我仔细观察，发现user返回的是Object，再上网查询，看到此帖，将代码改为下面的写法就能成功显示头像了。按照那个大佬的说法，可能是返回的list集合中有脏数据，但是我检查了我的数据，应该没有错误数据，不太清楚是哪个环节出现的问题，而且是只在这张页面中出现这个问题了。


在这里插入图片描述

 <!-- 原来的写法 -->
 <img :src="commen.user.userAvatar"/>

 <!-- 修改后的写法 -->
<img :src="(commen.user || {}).userAvatar" />
不发红包的慢羊羊
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE 三层组件嵌套异步传输没有获取到数据
m0_45041148的博客
07-14 1453
在前一段时间开发的时候，有一个项目因为页面重新性比较多，所以抽调了不少组件，然后在组件嵌套组件的情况下，出现了孙级组件没有获取到encode值的情况 背景： 组件异步传输的问题，TheLanding是父组件，friend是子组件，shareAll是孙组件，shareAll组件会用到encode值，这个encode值是存储在TheLanding中的，会有一个问题就是传输的时候其实encode还没有值，所以就是出现一个时机的问题，采用了三种种方法 存入session，还是会出现encode为空的情况，时好时坏
vue在控制台展开有值代码却获取不到
hoopec的博客
05-07 3836
目录1.浏览器控制台获取到的是当前值2.vue this指向发生改变异步请求 我们在平时经常遇到在测试的过程中在浏览器控制台展开数据有值但是代码却无法获取到值，我总结了自己遇到的一些情况，后面再发现可能继续更新。 1.浏览器控制台获取到的是当前值 当我们在console.log输出测试点开查看是否有值时，发现明明有值，代码使用时却获取不到，这是因为浏览器获取的是该参数当前的值，而不是你console.log输出时的值。 可以发现当我们在对展开之前又给它push一个值后，展开的是最新的数据而不是调用它时的数
使用v-for双层循环数据时,第二层数组不显示数据
欢迎小伙伴们的评论和私信，工作日基本都会上来看看的哈
03-14 3673
vue里面循环数据一般使用v-for命令，但是循环一层的时候没啥问题，数据可以正常显示出来，但是循环两层时，有时候第二层数组里面的数据不显示，然后去百度了下，发现有兄弟也碰到了这种情况，并且给出了解决的办法，推荐使用 this.$forceUpdate() 这是vue里面的强制更新数据的方法，效果非常好，嘿嘿 其实moldslist（第二层数组）这个字段，是我在本地新加的字段，也就是说，不是接口返回的， 想要给每一条数据都加上这个字段，使用for循环呗，然后直接就var了，自然就报错了，系统提示我
v-for后item.arr无法读取第二层数据
ikedaelaiza的博客
10-12 288
v-for后item.arr无法读取第二层数据
能获取到数据，vue中的v-for却不可以遍历数据，后台也没报错
weixin_48193862的博客
01-31 653
其实呢，仔细地一看我就发现了，前面几张图都在透露着data数据里面的是数组对象吗？不是呀，，那就是个字符串类型的数据，当时实在太粗心了嘿，不小心把数组对象给变成字符串了。可能也只有我那么粗心了，这个是反面教材，请大家不要不向我学习哦。今天是小白我第一次直接实战用express写了一个get请求的接口，不小心就走了个错误，下面分享给大家，希望不要踩和我一样的坑，哈哈哈，主要还是我太粗心了。一到遍历的时候就出了大问题，后台也没报错。在postman里好像也没啥问题。这个是我刚开始写的一个小接口。
Vue 中 v-for 不能遍历数据？
雨声学java
03-28 2978
Vue 中 v-for 不能遍历数据？ v-for 参数顺序介绍
v-for使用时出现的无法获取，失序，删除异常问题
weixin_44528067的博客
01-24 784
v-for使用时出现的无法获取，失序，删除异常问题
解决vue v-for 遍历循环时key值报错的问题
10-18
在Vue.js中，`v-for`指令用于遍历数组或对象，它是一个非常重要的功能，但如果不正确地使用`key`属性，可能会遇到警告或性能问题。本文将深入探讨这个问题，帮助你理解如何正确处理`v-for`循环中的`key`值。 首先，...
基于vue v-for 多层循环嵌套获取行数的方法
10-17
今天小编就为大家分享一篇基于vue v-for 多层循环嵌套获取行数的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
10-17
主要介绍了Vue指令v-for遍历输出JavaScript数组及json对象的常见方式,结合实例形式总结分析了vue.js使用v-for指令遍历输出js数组与json对象的常见操作技巧,需要的朋友可以参考下
使用vue中的v-for遍历二维数组的方法
01-19
如下所示： <tr v-for='(item, index) in data'> <template v-for='items in item'> <template v-for='(itemss, indexs) in items' v-if='indexs !== type'> <td>{{itemss}} </template>
ajax返回的数据有问题,ajax请求成功返回数据，转成数组后，for遍历取不到值的有关问题...
weixin_39574050的博客
08-06 391
当前位置:我的异常网» Ajax»ajax请求成功返回数据，转成数组后，for遍历取不到ajax请求成功返回数据，转成数组后，for遍历取不到值的有关问题www.myexceptions.net网友分享于：2014-07-19浏览：0次ajax请求成功返回数据，转成数组后，for遍历取不到值的问题？如题，ajax请求成功后返回了数据，转数组如图：alert(arr.length)出数据...
for in 遍历对象时的取值问题
weixin_50575300的博客
02-22 335
var obj = { name:'12', age:123, sex:'male' } for( var i in obj){ console.log(obj.i) } 这样打印的结果全是undefined 然后我们在obj里面加一个prop属性时,我们会发现打印了4次456 var obj = { name:'12', age:123, ..
VUE语法：v-for指令的四种用法
qq_42586648的博客
07-25 2万+
最近在学习VUE，目前酸菜鱼也才刚开始几天，或许是没天赋之前接触框架也很浅显，很多稍难地方学习的不通透，简单的反倒一过就忘记了。于是想要把简单基础逐步简单梳理一遍，以防万一自己连基础的都学不到，分享给大家共同总结学习。 v-for的四种应用方式: 方式一：v-for循环普通数组 //土蛋方法： <p>{{list[0]}}</p> <p>{{list[1...
v-for循环遍历生成div，解决取不到值的问题
Huagg24的博客
03-02 1335
今天用v-for取后端拿到的tree时发现怎么都不显示【index】也加了。调整完还是不行，最后发现是v-for写法有问题，取data中的值ZhiNan。我查了之后说是没加index导致的，因为dom文档还没生成 所以取不到值。v-for取data中的值不需要加this. 真的很无语。
【学习笔记】20-v-for遍历数组和对象的学习
wersdf22的博客
09-21 215
v-for用于遍历数组和对象 一般服务器的数据接收会用到v-for的遍历，有三种遍历场景 遍历对象的过程中，如果只获取一个值，那么获取到的是value 获取key和value 格式(item,index) 获取key、value和index 格式(item,key,index) 示例代码 <div id="app" > <ul> <!--1.遍历对象的过程中，如果只获取一个值，那么获取到的是value--> <li v-for="item in ar
vue的v-for循环普通数组、对象数组、对象、数字
热门推荐
欧阳小白闯天涯
07-20 5万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> ...
Vue踩坑日记之v-for嵌套遍历时不能遍历对象中的数组
HumorChen的博客
03-09 2892
对象嵌套了数组，数组嵌套了对象，且是多层的，因此Vue无法检测到内部的更新或增删。
vue v-for遍历map集合
最新发布
04-29
在Vue中，使用v-for指令可以方便地遍历数组或对象集合，并将集合中的每个元素渲染到页面上。...需要注意的是，在使用v-for遍历Map集合时，需要为每个元素设置唯一的key属性，以便Vue能够正确地跟踪每个元素的变化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值