I am currently in the process of developing a small vue.js web application tool designed for viewing and editing a backend config file formatted as JSON. Within this object, there is an enum field represented on the backend as a uint. My goal is to find a way to map the display name to the numerical value in the JSON and then present these options in a dropdown select menu. At the moment, I have a v-for element that iterates through each config record, displaying each field.
The structure of the object is as follows:
{records:[
{
id:"12345",
target:678,
src:"path/to/src"
operator:0 // backend enum where values 0,1,2... correspond to specific operators
},
... // more records
}
This is what I currently have for the dropdown selection:
<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>
I am seeking a method to automatically convert the numerical value in the JSON to display text such as "EQ", "NEQ", etc. within the dropdown menu using JavaScript and Vue. Additionally, when the user selects an option from the dropdown menu, I want it to update the data with the corresponding numerical value defined by the backend, rather than the displayed text.
EDIT: I removed a section of code explaining how the backend generates the JSON and why it's structured as an enum. Unfortunately, this caused the question to be flagged as a duplicate, so I have eliminated that portion.