<template>
<view>
<view class="padding-xl" v-for="(item,index) in fenecList.fences" :key="index">
<text>{{item.name}}</text>
<!-- 嵌套循环 -->
<view v-for="itemson in item.tasks">
<text>{{itemson.name}}</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
fenecList: [],
};
},
onLoad() {
this.getList();
},
methods: {
getList() {
uni.request({
url: "../../static/test.json",
method: 'get',
dataType: 'json',
success: (res) => {
console.log(res.data);
this.fenecList = res.data.info;
},
});
},
},
}
</script>
<style>
</style>
json数据
{
"retCode": 1,
"info": {
"id": 1,
"configName": "家庭作业",
"fences": [{
"id": 1,
"name": "测试区域一",
"tasks": [{
"id": 1,
"name": "测试办公室位置"
},{
"id": 2,
"name": "测试会议的位置"
},{
"id": 3,
"name": "测试办公室位置"
}]
},{
"id": 2,
"name": "测试区域二",
"tasks": [{
"id": 1,
"name": "查看饮水机"
},{
"id": 2,
"name": "查看电脑的"
},{
"id": 3,
"name": "查看空调"
}]
}]
}
}
渲染数据
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有