vue获取map集合中的key、value值

背景：前端接收后端返回的list集合，并将该集合展示在页面。

//例如：
let _list = [{"name":"小一", "age":10, "id":1},{"name":"小二", "age":15, "id":2},{"name":"小三", "age":9, "id":3}]

方案一，直接在HTML代码中使用v-for、Object.key、Object.value来渲染页面

<template>
	<div v-for="map in _list">
		<ul v-for="(_key,index) in Object.key(map)" :key="index">
			<li>
				{{_key + " : " + Object.value(map)[index]}}
			</li>
		</ul>
	</div>
</template>

注：如果是使用axios进行异步请求，需要注意的是数据还未返回，界面就已经开始渲染，导致此时的_list=[]，前端界面控制器会出现错误提示，原因是Object.key(obj)和Object.value(obj)中的obj不能为null或undefined。

方案二，在js部分对集合进行处理，使用到Object.entries枚举方法

	let newList = [];
	let _length =  null != _list ? _list.length : 0;
	for(let i = 0; i< _length; i++){
		Object.entries(_list[i]).forEach( label=>{
			let [_key , _value] = label;
			newList.push({_key , _value});
		});
	}
	this._list = newList;

前端html代码稍微发生变化

<template>
	<div v-for="map in _list">
		<ul>
			<li>
				{{map._key + " : " + map._value}}
			</li>
		</ul>
	</div>
</template>

这样就避免了后端数据未发送到前端时，前端进行渲染，导致Object.key等方法报错的问题。