在项目开发中,后端返回的数据是对象,前端为了简单画出页面,使用v-for,这时候可以将对象转为数组,来方便使用v-for循环
数据格式如下:
let obj = {
radio: [],
stem_radio: [],
stem_multiple_choice: [
{number: 7},
{number: 10},
],
checkbox: [],
stem_checkbox: []
};
思路:使用Object.entries()静态方法返回一个数组,包含给定对象自有的可枚举字符串键属性的键 值对。再使用map方法将键名和键值对应返回新的数组
function toArr(obj) {
let array = Object.entries(obj).map(([key, value]) => ({ key: key, value: value }));
console.log(array);
}
成功转换后数据格式如下:
这下在使用v-for循环出来就可以了
还有一个问题就是需要根据key展示对应中文名称,数据少的话模板使用三元表达式就能解决,考虑到数据多的话可以写个方法:将key值传进来即可
// 格式化题型名称
formatTopicName(item) {
const topicNames = {
"radio": '单选题',
"stem_radio": '共用题干单选题',
"stem_multiple_choice": '案例分析题',
"checkbox": '多选题',
"stem_checkbox": '共用选项单选题',
};
return topicNames[item];
},