怎么拼接标题比较舒服？

Question

根据后端读取到的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()里拼接好再显示会不会好一点？

Answer 1

这什么OJ啊（好奇
模板我觉得还好，getStatusDetail 那里可以改进，比如

- const {data : res} = await this.$fetch(.........);
+ const { data: [res] } = await this.$fetch(.........)

// 不能直接赋值的话，合并一下也比一条一条来简洁
this.stitle = {
    id: res.id,
    user: res.user.data.username,
    problem: res.problem_id,
    labelColor: CommonVariable.labelColor[res.result],
    statusString: CommonVariable.statusString[res.result]
    // 一个叫做 CommonVariable 的 Variable 起了一个不那么 Common 的名字，或许可以缩短一下
}

然后我口胡一下，感觉 badge 和 username 可以写成组件（
把读取 .data.username 这一步还有外面的标签封装起来，应该会简洁一些