如何获取Axios与Vue渲染的下拉选择框的ID值

没问题，我来帮你搞定这个下拉框获取ID的需求！你现在的代码只渲染了用户类型的名称，但没把对应的TipoUsuarioId和选项关联起来，所以没法拿到提交需要的ID值。咱们通过Vue的v-model和绑定option的value属性就能轻松解决，具体步骤如下：

1. 修改模板中的下拉框代码 #

给<select>添加v-model指令绑定一个变量，同时给每个<option>绑定:value属性把TipoUsuarioId设为选项的值，另外记得给v-for加上key（Vue的最佳实践，避免渲染异常）：

<select id="ddlTipoUsuario" class="form-control" v-model="selectedTipoUsuarioId">
  <option 
    v-for="tipoUsuario in tipoUsuarios" 
    :key="tipoUsuario.TipoUsuarioId" 
    :value="tipoUsuario.TipoUsuarioId"
  >
    {{ tipoUsuario.Tipo }}
  </option>
</select>

2. 在组件data中新增绑定变量 #

在你的data()里添加一个变量，用来存储用户选中的ID：

export default {
  data() {
    return {
      tipoUsuarios: [],
      selectedTipoUsuarioId: null // 新增这个变量，专门存选中的用户类型ID
    }
  },
  // ... 其他代码（比如获取tipoUsuarios的axios请求逻辑）
}

3. 提交时直接使用绑定的变量 #

当你需要把数据提交到另一数据表时，直接用this.selectedTipoUsuarioId就能拿到选中的ID了。举个提交请求的示例：

// 示例提交接口请求
axios.post('/你的提交接口地址', {
  tipoUsuarioId: this.selectedTipoUsuarioId,
  // 其他需要提交的字段...
})
.then(response => {
  // 处理提交成功的逻辑
})
.catch(error => {
  // 处理提交失败的逻辑
})

简单说下原理 #

• :value="tipoUsuario.TipoUsuarioId"：把每个选项的实际值设置为对应的ID，而不是默认的文本内容
• v-model="selectedTipoUsuarioId"：实现双向绑定，用户选哪个选项，这个变量就会自动更新为对应的ID，提交时直接取用就行

内容的提问来源于stack exchange，提问作者Isaías Orozco Toledo