Vue中v-for遍历TypeScript enum为何同时显示名称和值？如何只遍历键

问题产生原因 #

TypeScript 的数字枚举默认会生成双向映射关系：除了从枚举名到枚举值的正向映射外，还会额外生成从枚举值到枚举名的反向映射。你定义的Colors枚举编译为原生JS后实际的对象结构如下：

const Colors = {
  RED: 1,
  BLUE: 2,
  GREEN: 3,
  1: 'RED',
  2: 'BLUE',
  3: 'GREEN'
}

直接用v-for遍历这个对象时，会把所有6个属性都遍历出来，所以才会出现6个v-chip组件。

仅遍历枚举键的实现方案 #

方案1：过滤枚举的属性键（推荐，无需修改原有枚举定义） #

新增计算属性过滤掉反向映射的数字类型键即可，反向映射的键都是数字转为的字符串，用isNaN判断过滤即可：

<template>
   <div>
      <v-chip v-for="key in colorKeys" :key="key">{{key}}</v-chip>
   </div>
</template>

<script lang="ts">
import {Colors} from "./Enums"
import Vue from "vue";
export default Vue.extend({
  data: () => ({
     Colors,
  }),
  computed: {
    colorKeys() {
      // 过滤掉数字字符串类型的反向映射键
      return Object.keys(this.Colors).filter(key => isNaN(Number(key)))
    }
  }
});
</script>

方案2：改用字符串枚举（适合可以调整枚举定义的场景） #

如果枚举值定义为字符串类型，TypeScript不会生成反向映射，直接遍历即可得到正确的枚举键：

// 修改枚举定义
export enum Colors {
  "RED" = "1",
  "BLUE" =  "2",
  "GREEN" = "3",
}

修改后无需额外处理，原模板的遍历逻辑直接可用。

方案3：封装通用工具函数 #

如果项目中多处需要遍历数字枚举的键，可以封装通用方法复用：

// 全局通用工具函数
function getEnumKeys<T extends object>(enumObj: T): Array<keyof T> {
  return Object.keys(enumObj).filter(key => isNaN(Number(key))) as Array<keyof T>
}

// 组件内使用
computed: {
  colorKeys() {
    return getEnumKeys(this.Colors)
  }
}

内容的提问来源于stack exchange，提问作者d-_-b