I am building a little vue.js webapp tool to view and edit a backend config file (formatted as a json). The object has an enum field which is represented on the backend as a uint, but I would like to somehow map the display name to the numerical value in the json and then display the options in a dropdown select. I currently have a v-for element that loops over each config record and displays each field.

The object looks like:

{records:[
  {
    id:"12345",
    target:678,
    src:"path/to/src"
    operator:0 // backend enum where values 0,1,2... map to the below operators
  },
  ... // more records
}

I currently have the following for the dropdown:

<label class="recorditem">Comparison Operator:
  <select v-model="record.operator">
    <option>EQ</option>   // should map to 0
    <option>NEQ</option>  // should map to 1
    <option>GT</option>   // should map to 2
    <option>GTE</option>  // should map to 3
    <option>LT</option>   // should map to 4
    <option>LTE</option>  // should map to 5
  </select>
</label>

Is there any way to take the numerical value in the json and with javascirpt/vue display the text "EQ", "NEQ", etc. in the dropdown on the webpage and then when the user clicks on the selected option in the dropdown, have it update the data with the numerical value (instead of the text) as defined by the backend?

EDIT: I deleted a section of code that displayed how the backend was generating the json and why it's an enum but that somehow got the question marked as a duplicate so it is now removed.

I am building a little vue.js webapp tool to view and edit a backend config file (formatted as a json). The object has an enum field which is represented on the backend as a uint, but I would like to somehow map the display name to the numerical value in the json and then display the options in a dropdown select. I currently have a v-for element that loops over each config record and displays each field.

The object looks like:

{records:[
  {
    id:"12345",
    target:678,
    src:"path/to/src"
    operator:0 // backend enum where values 0,1,2... map to the below operators
  },
  ... // more records
}

I currently have the following for the dropdown:

<label class="recorditem">Comparison Operator:
  <select v-model="record.operator">
    <option>EQ</option>   // should map to 0
    <option>NEQ</option>  // should map to 1
    <option>GT</option>   // should map to 2
    <option>GTE</option>  // should map to 3
    <option>LT</option>   // should map to 4
    <option>LTE</option>  // should map to 5
  </select>
</label>

Is there any way to take the numerical value in the json and with javascirpt/vue display the text "EQ", "NEQ", etc. in the dropdown on the webpage and then when the user clicks on the selected option in the dropdown, have it update the data with the numerical value (instead of the text) as defined by the backend?

EDIT: I deleted a section of code that displayed how the backend was generating the json and why it's an enum but that somehow got the question marked as a duplicate so it is now removed.

• javascript
• json
• vue.js
• enums

• If you're not looking to generate the string values from Go, it seems Go is irrelevant and I would remove it from the question and replace it with the json data to avoid confusion. – Mr_Pink Commented Nov 20, 2024 at 18:34
• Well I wanted to add context for why the enum was a uint in the json as opposed to just a javascript enum (ie where the values of the enum are strings) – WarBro Commented Nov 20, 2024 at 18:42
• There needs to be enum object like {0: 'EQ', ...} defined on client side, and you can map it to <option> with v-for. Could also be an array because it's zero-based. Is this what you ask about? – Estus Flask Commented Nov 20, 2024 at 20:59
• @EstusFlask Yes, this is what I need. My question is how do you do that? – WarBro Commented Nov 22, 2024 at 15:07

1 Answer 1

There should be a enum defined somewhere in the application that allows to map key to value. TypeScript enum syntax provides a two-way mapping. In JavaScript this can be just a plain object, this may require to convert between string and numeric operator values. It can be an array for zero-based consecutive keys. Or a map for less limitations at the expense of less elegant syntax:

export const operatorsMap = new Map([
  [0, 'EQ'],
  ...
]);

Then in a component it's imported and exposed to a template:

<option v-for="[key, name] in operatorsMap" :key="key" :value="key">{{name}}</option>