Vue.js中v-for渲染下拉框如何获取:key值并存入变量

首先纠正一个认知：:key是Vue内部做虚拟DOM对比用的标识，不会渲染到真实DOM上，不要尝试从事件对象里读取key值。你现在拿不到id的核心原因是给<option>绑定的:value只传了data.name，自然只能拿到名称，调整value绑定逻辑就能同时拿到id和名称，下面是两种可直接落地的实现方案：

这个写法完全符合原生HTML select的规范，不存在值类型转换、表单提交异常的坑，适配所有Vue版本和浏览器环境。
首先修改模板代码，修正原代码里的多余冒号笔误，把option的value绑定为data.id，@change不需要额外传$event：

<select @change="checkFirst" v-model="firstDropdownValue">
   <option value="none" selected> Select one...</option>
   <option 
      v-for="data in getCategoriesDetail" 
      :key="data.id"
      :value="data.id">
      {{data.name}}
   </option>
</select>

然后在change方法里，直接用v-model同步的选中id，去原数组匹配对应项就能拿到所有字段：

methods: {
  checkFirst() {
    if (this.firstDropdownValue === 'none') {
      // 处理默认未选择的逻辑
      return
    }
    // 匹配选中的完整数据
    const selectedData = this.getCategoriesDetail.find(item => item.id === this.firstDropdownValue)
    // 直接取值存变量即可
    const currentId = selectedData.id
    const currentName = selectedData.name
    console.log('选中id:', currentId, '选中名称:', currentName)
  }
}

Vue对select的v-model做了专门适配，支持将option的value绑定为对象类型，选中后v-model直接存储完整的数据对象，不需要手动匹配。
模板写法：

<select v-model="selectedData">
   <option :value="null" selected> Select one...</option>
   <option 
      v-for="data in getCategoriesDetail" 
      :key="data.id"
      :value="data">
      {{data.name}}
   </option>
</select>

这种写法甚至不需要额外绑定change事件，随时读取this.selectedData就能拿到完整字段：

// 直接取属性即可
if (this.selectedData) {
  const currentId = this.selectedData.id
  const currentName = this.selectedData.name
}

注意：如果你的场景需要支持原生表单提交、或者要兼容极低版本浏览器，优先选方案1；方案2是Vue层的能力实现，原生环境下无法正确读取对象类型的value。

内容的提问来源于stack exchange，提问作者user16892667