8
vue v-for 循环嵌套报错问题,请大佬闷帮忙看看
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.
我准备实现一个树形结构渲染,大概是以下这样
楼栋 i
楼层 n
房间 x
但是在循环楼层 n
和房间 x
时出现了报错,取不到上一个v-for
的item
,告诉我未定义
我直接贴代码吧, 用的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>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK