jiyumoyouran 2020-02-08 17:26 采纳率: 0%
浏览 1258

vue中双重循环与复杂对象的解析问题

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>
  • 写回答

1条回答

  • 毕小宝 博客专家认证 2020-02-08 19:08
    关注

    刚刚测试了一下,不是双重遍历的问题,而是你请求响应的 groups 中的记录的 userInfos 属性的确是 undefined 的。
    我用你的 demo 数据测试的,是能够显示数据的,所以判断问题存在于 getGroups 函数取到的数据有问题。
    这是我的测试单页面:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
      <body>
        <div id="app">
          <div v-for="(group,groupIndex) in groups" v-bind:groupIndex="group.index" :key="group.gid">
                <span>{{group.name}}</span>
                <div v-if="group.show">
                    <div class="friend" v-for="(friendInfo) in groups[groupIndex].friends"
                         :key="friendInfo.fid">
                        <span>{{friendInfo.userInfo.icon}}</span>
                        <span>{{friendInfo.comments}}</span>
                        <span>{{friendInfo.userInfo.sign}}</span>
                    </div>
                </div>
    
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
        <script>
    
        //一个vue的实例
        new Vue({
            el: '#app',
    
            //model
            data: {
              groups: [{
                        'show': true,
                        'gid': '',
                        'userId': '',
                        index: '',
                        'name': '是我啊',
                        'createTime': '',
                        friends: [{
                            'fid': '',
                            'user': '',
                            'friend': '',
                            'groupId': '',
                            'createTime': '',
                            index:'',
                            'comments': 'aaa',
                            userInfo: {
                                'uid': '',
                                'nickname': '',
                                'icon': 'icon123',
                                'sign': 'sign11111'
                            }
                        }]
                    }]
            }
        })
    
    
        </script>
      </body>
    </html>
    

    直接保存为 test.html 文件,浏览器打开的结果为:
    图片说明

    评论

报告相同问题?

悬赏问题

  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥50 汇编语言除法溢出问题
  • ¥65 C++实现删除N个数据列表共有的元素
  • ¥15 Visual Studio问题
  • ¥15 state显示变量是字符串形式,但是仍然红色,无法引用,并显示类型不匹配
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波