关于#前端#的问题：后端返回字符串类型的多个数字，前端如何转化为对应的文字且用逗号隔开

Question

问题

后端返回字符串类型的多个数字，前端如何转化为对应的文字且用逗号隔开？

代码

<template>
  <div class="home">
    <table class="pure-table pure-table-bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>信息类型</th>
        </tr>
      </thead>

      <tbody v-for="(item, index) in typeData" :key="index">
        <tr>
          <td>{{ item.id }}</td>
          { item.enableTypes}} -->
          <td>{{ getTypeData(item.enableTypes) }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
 // 假设是后端返回的数据
      typeData: [
        {
          enableTypes: "0,1",
          id: "100001",
          user: "张三",
        },
        {
          enableTypes: "1,2",
          id: "100002",
          user: "李四",
        },
        {
          enableTypes: "2,3",
          id: "100003",
          user: "王五",
        },
        {
          enableTypes: "0,3",
          id: "100004",
          user: "赵六",
        },
      ],

结果

不能转化为中文且逗号隔开

Answer 1

// 映射
      typeMap: [
        {
          value: "微信",
          type: 0,
        },
        {
          value: "QQ",
          type: 1,
        },
        {
          value: "邮箱",
          type: 2,
        },
        {
          value: "语音",
          type: 3,
        },
      ],
// 计算属性
  computed: {
    getTypeData() {
      console.log(444);
      return (str) => {
        return String(str.split(",").map((item) => this.typeMap[item].value));
      };
    },
  }