根据后端读取到的json数据,怎么把各个数据拼接成一个标题呢?大致效果如下:
读取到的json数据大概长这样:
{
"jsonapi": {
"version": "1.0"
},
"data": [{
"id": 1004,
"problem_id": 1003,
"result": 6,
"language": 1,
"user": {
"data": {
"username": "admin"
}
}
}],
}
稍微麻烦点的是result
这个属性,还得转换成“Wrong Answer”、“Accepted”、“Time Limit Exceeded”等字符串以及相应的颜色(如success 、warning、danger),我用了几个类似hash数组来映射:
const CommonVariable = {
statusString: [
'Pending',
'Pending Rejudging',
'Compiling',
'Running & Judging',
'Accepted',
'Presentation Error',
'Wrong Answer',
'Time Limit Exceed',
'Memory Limit Exceed',
'Output Limit Exceed',
'Runtime Error',
'Compile Error',
'Compile OK',
'Test Running Done',
],
labelColor: [
'primary',
'primary',
'default',
'primary',
'success', // 4 AC
'danger',
'warning', // 6 WA
'danger',
'danger',
'danger',
'danger',
'danger',
'default',
'default',
],
}
export {
CommonVariable,
ScoreFormat,
}
然后是拼接:
<template>
<div class="title">
<a href="#">#{{stitle.id}}</a>,
By <span class="text-primary">{{stitle.user}}</span>,
Problem <span class="text-primary">{{stitle.problem}}</span>,
<span :class="`p-badge badge-pill badge-${stitle.labelColor}`">{{stitle.statusString}}</span>
</div>
</template>
export default {
data () {
return {
stitle: {}
}
},
async getStatusDetail(id) {
const {data : res} = await this.$fetch(.........);
this.stitle.id = res[0].id;
this.stitle.user = res[0].user.data.username;
this.stitle.problem = res[0].problem_id;
this.stitle.labelColor = CommonVariable.labelColor[res[0].result];
this.stitle.statusString = CommonVariable.statusString[res[0].result];
}
}
总觉得这很麻烦~有没有其他轻巧或优美点的方式?比如在getStatusDetail()
里拼接好再显示会不会好一点?