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

Posted 2023-03-13

【中文标题】从 Vue <select> @change 事件中获取两个值

【英文标题】：Getting two values from a Vue <select> @change event

【发布时间】：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？

【参考方案1】：

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