8

vue v-for 循环嵌套报错问题,请大佬闷帮忙看看

 3 years ago
source link: https://www.v2ex.com/t/781103
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

V2EX  ›  Vue.js

vue v-for 循环嵌套报错问题,请大佬闷帮忙看看

  edk24 · 4 小时 25 分钟前 · 537 次点击

我准备实现一个树形结构渲染,大概是以下这样

楼栋 i
	楼层 n
    	房间 x

但是在循环楼层 n房间 x时出现了报错,取不到上一个v-foritem,告诉我未定义

我直接贴代码吧, 用的vue.js

ReferenceError: hall is not defined
let app = new Vue({
    el: '#app',
    data: {
        // 楼栋、楼层、房间数据
        hallList: [
            {
                index: 4,
                name: '四号楼',
                show: true,
                floorList: [
                    {
                        index: 1,
                        name: '一层',
                        show: true,
                        roomList: [
                            {
                                id: 1,
                                room_number: '4604',
                                room_type: '14',
                                room_status: 1,
                                is_dirty: 52,
                                order_id: 1,
                                member: ['余小波', '李家平']
                            }
                        ]
                    },
                    {
                        index: 2,
                        name: '二层',
                        show: true,

                        roomList: [
                            {
                                id: 1,
                                room_number: '4604',
                                room_type: '14',
                                room_status: 1,
                                is_dirty: 52,
                                order_id: 1,
                                member: ['余小波', '李家平']
                            }
                        ]
                    }
                ]
            },
            {
                index: 3,
                name: '三号楼',
                show: true,
                floorList: [
                    {
                        index: 1,
                        name: '一层',
                        show: true,

                        roomList: [
                            {
                                id: 1,
                                room_number: '4604',
                                room_type: '14',
                                room_status: 1,
                                is_dirty: 52,
                                order_id: 1,
                                member: ['余小波', '李家平']
                            }
                        ]
                    },
                    {
                        index: 2,
                        name: '二层',
                        show: true,

                        roomList: [
                            {
                                id: 1,
                                room_number: '4604',
                                room_type: '14',
                                room_status: 1,
                                is_dirty: 52,
                                order_id: 1,
                                member: ['余小波', '李家平']
                            }
                        ]
                    },
                    {
                        index: 3,
                        name: '三层',
                        show: true,

                        roomList: [
                            {
                                id: 1,
                                room_number: '4604',
                                room_type: '14',
                                room_status: 1,
                                is_dirty: 52,
                                order_id: 1,
                                member: ['余小波', '李家平']
                            }
                        ]
                    }
                ]
            }
        ],
        // 当前渲染楼层
        floorList: [],
        // 选中楼栋楼层
        currentHallIndex: 3,
        currentFloorIndex: 1,
    },
});
<li class="hall-body" v-for="(hall, i) in hallList" :key="i">
    <div class="hall-body-title">
        {{hall.name}}
    </div>

    <div class="hall-body-content">
        {{hall.floorList}}
        <!-- 楼层 -->
        <li class="floor-body" v-for="(floor, n) in hall.floorList" :key="n" >
            <div class="floor-body-title">
                {{floor.name}}

            </div>
            <div class="floor-body-content">
                <!-- 房间 -->
                <li class="room" v-for="(room, x) in floor.roomList" :key="x" >
                    <div class="room-number">{{room.room_number}}</div>
                </li>
            </div>
        </li>
    </div>
</li>

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK