V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
edk24
V2EX  ›  Vue.js

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

  •  
  •   edk24 ·
    edk24 · 2021-06-03 12:33:07 +08:00 · 2088 次点击
    这是一个创建于 1030 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    楼栋 i
    	楼层 n
        	房间 x
    

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

    我直接贴代码吧, 用的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>
    
    9 条回复    2021-06-03 14:59:02 +08:00
    hazardous
        1
    hazardous  
       2021-06-03 13:27:04 +08:00
    li 外要有 ul/ol 包裹
    hazardous
        2
    hazardous  
       2021-06-03 13:30:46 +08:00
    非 vue 问题,li 直接嵌套的话,会被 html 解析器处理成同一层级。
    PinkRabbit
        3
    PinkRabbit  
       2021-06-03 13:48:52 +08:00
    如楼上所说,li 外面套 ul/li 或者把 li 改成 div
    ooxiaoming
        4
    ooxiaoming  
       2021-06-03 14:02:44 +08:00
    @PinkRabbit 刚试了下,本地没报错,codepen 上报错了,感觉两个的 html 解析器不相同导致的
    edk24
        5
    edk24  
    OP
       2021-06-03 14:07:41 +08:00
    @PinkRabbit
    @hazardous

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

    要不然我今天还不如洗了蒜了
    edk24
        6
    edk24  
    OP
       2021-06-03 14:09:39 +08:00
    @ooxiaoming 这种方式我好像以前也用没啥问题, 会不会是 vue 渲染时才出现的

    li 外层用 div
    ooxiaoming
        7
    ooxiaoming  
       2021-06-03 14:14:46 +08:00
    @edk24 可能版本不一样吧,htmlParser 解析成 AST 的结果不相同
    edk24
        8
    edk24  
    OP
       2021-06-03 14:15:09 +08:00
    @edk24 确实是 html 解析的缘故,谨记教诲了 再也不偷懒在 li 外面用 div 了
    lovecy
        9
    lovecy  
       2021-06-03 14:59:02 +08:00
    @edk24 如果你不按照标准的 HTML 写,不同浏览器解析结果就会不一样,比如 chrome 会自动给你补上一些关闭 tag,会自动在 tr 外层加 tbody,但不是所有浏览器都一致
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2763 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 12:49 · PVG 20:49 · LAX 05:49 · JFK 08:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.