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

Running ngAfterViewInit() code in Angular should be done only after Inputs() have been initialized

A guide on utilizing the useEffect hook to dynamically update a button icon when hovering over it in a React application

The instance is referencing the property or method "sendResetMail" during render, but it is not defined

Ensure that reactivity is applied only to nested properties

Having trouble connecting Nextjs with ChromaDB?

Understanding the concept of a "class variable" in Typescript when referring to a variable that belongs to another class

Ways to designate a parent element in Vue Draggable when the element is lacking a child

How to utilize a PHP array within a Vue.js template

When trying to convert a jest test to typescript, an error message may be encountered stating: "SyntaxError: Unable to

Using Rxjs to dynamically map values from an array with forkJoin

Select characteristics with designated attribute types

Invoke a parent method from a nested child component in Vue

How to retrieve the type of a computed keyof T as a generic type within TypeScript

Experiencing difficulties while attempting to organize an array?

Issue with Angular 7 cli failing to recognize a custom TypeScript file

After pressing the login button, my intention is to transition to a different page

Seeking guidance for the Angular Alert Service

Retrieve values from DynamoDB in their original Number or String formats directly

Steps to troubleshoot a simple function that manages asynchronous tasks

Why is it necessary for me to constantly run npm run production in order to view any updates?