Getting two values from a Vue <select> #change event - html

Question

I have a drop-down <select> element that uses an array with key:value pairs. I'd like for the dropdown to only display values, but upon selection have the #change pass on both the value and the key.
<select
#change="
formChanged(
$event,
$event.target.selectedIndex,
$event.target.value,
$event.target.key
)
"
name="selectForm"
id="selectForm"
required
>
<option
v-for="(option, id) in getFormSelectArray()"
:key="id" :value="option"
>
{{ option }}
</option>
</select>
My function called through #change:
formChanged(event, selectedIndex, value, id): void {
console.log(
'Form Selection Changed: ' + event + ' ' + selectedIndex + ' ' + value, + ' ' + id
);
}
My data array generating function:
public getFormSelectArray() {
// Mapping IDs to Names
const names = 'a, b, c';
const ids = '123, 456, 789';
let i;
let currentKey;
let currentVal;
const result = {}
for (i = 0; i < ids.split(',').length; i++) {
currentKey = ids.split(',')[i];
currentVal = names.split(',')[i];
result[currentKey] = currentVal;
}
for (const key in result) {
const value = result[key];
}
return result;
}
My output:
Form Selection Changed: [object Event] 0 a NaN
How do I output the ID of 123 instead of NaN?

Answer 1

I think you should use #input instead of #change.