vue v-for of typescript enum

Question

为什么这个v-for循环在enum上显示名称和值？

我怎么能只在键上迭代呢？

export enum Colors {
  "RED" = 1,
  "BLUE" =  2,
  "GREEN" = 3,
}

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

<script lang="ts">
import {Colors} from "./Enums"
import Vue from "vue";
export default Vue.extend({
  data: () => ({
     Colors,
  }),
});
</script>

这奇怪的结果是6芯片，但我只希望只有3。

• 红色
• 蓝色
• 绿色
• 1
• 2
• 3.

Answer 1

因为列出对象的所有属性。，它将同时显示类型记录枚举的正向和反向属性。您需要自己对密钥进行过滤器，可能需要使用Number.isInteger()。

对于上下文，默认情况下，打字稿获取逆映射：

除了为成员创建一个具有属性名的对象之外，数值枚举成员还会得到从枚举值到枚举名称的反向映射。例如，在本例中： 让A = Enum.A；让nameOfA = Enuma；// "A“ TypeScript将其编译成以下JavaScript： “使用严格”；var Enum；(函数(Enum) { Enum[Enum"A“= "A"；})(Enum AC.26 (Enum = {}))；设a= Enum.A；让nameOfA = Enuma；// "A” 在此生成的代码中，枚举被编译为存储前向(name -> value)和反向(value -> name)映射的对象。对其他枚举成员的引用总是以属性访问的形式发出，并且从不内联。