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.