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

[edk24]

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

楼栋 i
	楼层 n
    	房间 x

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

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

错误

ReferenceError: hall is not defined

js

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,
    },
});

html

<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>

[hazardous]

li 外要有 ul/ol 包裹

[hazardous]

非 vue 问题，li 直接嵌套的话，会被 html 解析器处理成同一层级。

[PinkRabbit]

如楼上所说，li 外面套 ul/li 或者把 li 改成 div

[ooxiaoming]

@PinkRabbit 刚试了下，本地没报错，codepen 上报错了，感觉两个的 html 解析器不相同导致的

[edk24]

@PinkRabbit
@hazardous

感谢，没发现还造成这种问题。受教了

要不然我今天还不如洗了蒜了

[edk24]

@ooxiaoming 这种方式我好像以前也用没啥问题， 会不会是 vue 渲染时才出现的

li 外层用 div

[ooxiaoming]

@edk24 可能版本不一样吧，htmlParser 解析成 AST 的结果不相同

[edk24]

@edk24 确实是 html 解析的缘故，谨记教诲了 再也不偷懒在 li 外面用 div 了

[lovecy]

@edk24 如果你不按照标准的 HTML 写，不同浏览器解析结果就会不一样，比如 chrome 会自动给你补上一些关闭 tag，会自动在 tr 外层加 tbody，但不是所有浏览器都一致