Iterating through typescript enums in Vue using v-for

Question

Iterating through typescript enums in Vue using v-for

Why is the v-for loop over an enum displaying both names and values?

Is there a way to iterate only over the keys?

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>

The current behavior results in 6 chips, while I expected only 3.

RED
BLUE
GREEN
1
2
3

typescript vue.js

Answer 1

Answer №1

As v-for iterates through all properties of an object, it will display both the forward and reverse properties of the Typescript enum. To only show specific keys, you may need to manually filter the keys, potentially using Number.isInteger().

To provide some background, Typescript enums inherently include reverse mappings by default:

In addition to creating an object with property names for members, numeric enums members also get a reverse mapping from enum values to enum names. For example, in this scenario:
enum Enum {
  A,
}

let a = Enum.A;
let nameOfA = Enum[a]; // "A"
TypeScript translates this into the following JavaScript code:
"use strict";
var Enum;
(function (Enum) {
  Enum[Enum["A"] = 0] = "A";
})(Enum || (Enum = {}));
let a = Enum.A;
let nameOfA = Enum[a]; // "A"
In this resultant code snippet, an enum is compiled into an object that saves both forward (name -> value) and reverse (value -> name) mappings. Any references to other enum members are always output as property accesses rather than inline.

Answer 2

As v-for iterates through all properties of an object, it will display both the forward and reverse properties of the Typescript enum. To only show specific keys, you may need to manually filter the keys, potentially using Number.isInteger().

To provide some background, Typescript enums inherently include reverse mappings by default:

In addition to creating an object with property names for members, numeric enums members also get a reverse mapping from enum values to enum names. For example, in this scenario:
enum Enum {
  A,
}

let a = Enum.A;
let nameOfA = Enum[a]; // "A"
TypeScript translates this into the following JavaScript code:
"use strict";
var Enum;
(function (Enum) {
  Enum[Enum["A"] = 0] = "A";
})(Enum || (Enum = {}));
let a = Enum.A;
let nameOfA = Enum[a]; // "A"
In this resultant code snippet, an enum is compiled into an object that saves both forward (name -> value) and reverse (value -> name) mappings. Any references to other enum members are always output as property accesses rather than inline.

Answer 3

Answer №2

Using Jeff's guidance, the final code snippet will resemble the one below:

<template>
    <div>
      <v-chip 
        v-for="([value, key], idx) in Object.entries(Colors).filter(([_, k]) => Number.isInteger(k))" 
        :key="idx"
      >
        {{ key }}
      </v-chip>
    </div>
</template>

Answer 4

Using Jeff's guidance, the final code snippet will resemble the one below:

<template>
    <div>
      <v-chip 
        v-for="([value, key], idx) in Object.entries(Colors).filter(([_, k]) => Number.isInteger(k))" 
        :key="idx"
      >
        {{ key }}
      </v-chip>
    </div>
</template>

Iterating through typescript enums in Vue using v-for

Answer №1

Answer №2

Similar questions

Tips for detecting an empty Vuex store state and triggering a computed property when it's first initialized

Trouble with Webpack alias functionality observed during deployment on Heroku

Communicating Progress Updates from C# to Angular 6 Using HttpPost

Concealing Popover with internal click

TypeScript code runs smoothly on local environment, however encounters issues when deployed to production

Is it possible for an object's property specified in a TypeScript interface to also incorporate the interface within its own declaration?

Error TS2322: Cannot assign a variable of type 'number' to a variable of type 'string'

Number as the Key in Typescript Record<number, string> is allowed

Remove a key using Vue Resource

Guide on transforming a JSON string into an array of custom objects using the json2typescript NPM module within a TypeScript environment

A guide on successfully implementing Nuxt-img on nuxt3 generate!

Tips for enforcing a mandatory type with TypeScript

Having trouble displaying options in VueJS Component using datalist

Creating computed properties dynamically in Vue after initialization

Loop through the tabs in a for loop until reaching the specified length

Guide on integrating Vue JS code into a .Net MVC project

Obtaining the category value within a slot of the Vuetify calendar

My VUE JS Application is displaying outdated images that have been saved in the cache

Optimizing your data layer in Angular2: A Guide to Best Practices

Global Vue Component Styles Seeping Through Entire Website Interface