uni-app获取后台接口使用v-for双重循环渲染数据H5显示，app端不显示

た入场券 2024-04-19 09:10 15阅读 0赞

今天我获取后台接口，因为数据是**二维数据**，所以渲染到页面上我就使用了双重循环：

<block v-for="(item, index) in tableList.data.maps" :key="item.staffId">
    	<view v-for="(itemList, indexList) in item.prod" :key="indexList">
    		<view>{
       {itemList.devCode}}</view>
    		<view>{
       {itemList.prodName}}</view>
    		<view>{
       {itemList.planCount}}</view>
    		<view>{
       {itemList.actCount}}</view>
    		<view>{
       {itemList.staffName}}</view>
    	</view>
    </block>

data() { 
    		return { 
    			tableList: [],
    		}
    	},
    onLoad() { 
    	this.productsList();
    },
    methods: { 
    	productsList() { 
    		uni.request({ 
    			url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    			data: { 
    				text: 'uni.request'
    			},
    			header: { 
    				'custom-header': 'hello' //自定义请求头信息
    			},
    			success: (res) => { 
    				let table = res
    				this.tableList = table
    				console.log(this.tableList)
    			}
    		});
    	}
    },

写完后发现在H5端是可以正常显示出来的，但是运行到手机上就不显示内容了。那么解决方法是什么呢？  
看console.log(this.tableList)打印出来的内容显示为\*\*\[object Object\] of undefined\*\*:，哦~问题就出现在这里了，发现了问题所在，那么就有了下手的地方，接着，我就改为：

data() { 
    		return { 
    			tableList: [],
    		}
    	},
    onLoad() { 
    	this.productsList();
    },
    methods: { 
    	productsList() { 
    		uni.request({ 
    			url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    			data: { 
    				text: 'uni.request'
    			},
    			header: { 
    				'custom-header': 'hello' //自定义请求头信息
    			},
    			success: (res) => { 
    				//JSON.parse()【从一个字符串中解析出json对象】
    				//JSON.stringify()【从一个对象中解析出字符串】
    				let table = JSON.parse(JSON.stringify(res)) // ---------修改
    				this.tableList = table
    				console.log(this.tableList)
    			}
    		});
    	}
    },

最后，在手机上终于把数据显示出来了，我们下次见。。。。。。see you