从 Vue <select> @change 事件中获取两个值答案

【问题标题】：Getting two values from a Vue <select> @change event从 Vue <select> @change 事件中获取两个值
【发布时间】：2022-01-16 21:05:35
【问题描述】：

我有一个下拉 <select> 元素，该元素使用带有键：值对的数组。我希望下拉菜单仅显示值，但在选择时，@change 会同时传递值和键。

<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>

我的函数通过@change 调用：

  formChanged(event, selectedIndex, value, id): void {
    console.log(
      'Form Selection Changed: ' + event + '  ' + selectedIndex + ' ' + value, + ' ' + id
    );
  }

我的数据数组生成函数：

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;
}

我的输出：

Form Selection Changed: [object Event]  0 a NaN

如何输出 123 而不是 NaN 的 ID？

【问题讨论】：

标签： html typescript vue.js drop-down-menu

【解决方案1】：

我认为你应该使用@input 而不是@change。

【讨论】：