vue中双重循环复杂对象过程中找不到深层对象属性,并且不会显示数据,加上
this.$forceUpdate();
可以正常显示,但是还是会报错找不到对应的属性
错误截图
完整代码
<template>
<div>
<el-row v-for="(group,groupIndex) in groups" v-bind:groupIndex="group.index" :key="group.gid"
type="text">
<el-button type="text" @click="isShow(groupIndex)">{{group.name}}</el-button>
<div v-if="group.show">
<div class="friend" v-for="(friendInfo) in groups[groupIndex].friends"
:key="friendInfo.fid">
<el-image
style="width: 100px; height: 100px"
:src="friendInfo.userInfo.icon"></el-image>
{{friendInfo.comments}}
<span> {{friendInfo.userInfo.sign}}</span>
</div>
</div>
</el-row>
<br/>
</div>
</template>
<script>
export default {
name: 'FriendList',
methods: {
isShow: function (index) {
if (!this.groups[index].show) {
this.getFriends(this.groups[index].gid);
}
this.groups[index].show = !this.groups[index].show;
},
getUserInfo: function (uid,groupIndex,friendsIndex) {
console.log("getUserInfo");
this.$axios.get('http://192.168.43.3:9000/user/id/' + uid).then(res => {
this.groups[groupIndex].friends[friendsIndex].userInfo= res.data.data;
this.$forceUpdate();
console.log(this.groups[groupIndex].friends[friendsIndex].userInfo.icon);
}).catch(err => {
console.log(err);
this.$alert(res.data.message, '通知');
})
},
checkLogin: function () {
if (this.uid == null) {
this.$alert('很抱歉,您还没有登录!', '通知');
window.location = 'http://127.0.0.1:8010/login';
}
},
getGroups: function () {
this.$axios.get('http://192.168.43.3:9004/group/user/' + this.uid).then((res => {
if (res.data.flag) {
this.groups = res.data.data;
} else {
this.$alert(res.data.message, '通知');
}
})).catch(error => {
console.log(error.message);
this.$alert('网络错误,请稍后再试!', '通知');
});
},
getFriends: function (groupId) {
this.$axios.get('http://192.168.43.3:9004/friend/group/' + groupId).then((res => {
if (res.data.flag) {
for (let i = 0; i < this.groups.length; i++) {
if (groupId === this.groups[i].gid) {
this.groups[i].friends = res.data.data;
this.$forceUpdate();
let len = this.groups[i].friends.length;
for (let j = 0; j < len; j++) {
this.groups[i].friends[j].userInfo =
this.getUserInfo(this.groups[i].friends[j].friend,i,j);
}
}
}
} else {
this.$alert(res.data.message, '通知');
}
})).catch(error => {
console.log(error.message);
this.$alert('网络错误,请稍后再试!', '通知');
});
}
},
data: function () {
return {
uid: JSON.parse(sessionStorage.userInfo).uid,
groups: [{
'show': false,
'gid': '',
'userId': '',
index: '',
'name': '',
'createTime': '',
friends: [{
'fid': '',
'user': '',
'friend': '',
'groupId': '',
'createTime': '',
index:'',
'comments': '',
userInfo: {
'uid': '',
'nickname': '',
'icon': '',
'sign': ''
}
}]
}]
}
}, mounted() {
this.checkLogin();
this.getGroups();
}
}
</script>