如何获取由axios和Vue填充的选择的ID值 [英] How to obtain the ID Value of a select populated with axios and Vue

问题描述

我有一个

<select id="ddlTipoUsuario" class="form-control" >
   <option v-for="tipoUsuario in tipoUsuarios">{{tipoUsuario.Tipo}}</option>
</select>

填充了Vue和axios，但是我需要获取ID值才能发布到另一个表中. 在response.data中返回以下值:

populated with Vue and axios, but I need to obtain the ID Value to post in another table. In the response.data returns these values:

[ { 
    "TipoUsuarioId": 1, 
    "Tipo": "Administrador" 
  }, 
  { 
    "TipoUsuarioId": 2, 
    "Tipo": "Usuario" 
  } ]

要填充我的<select>，请使用以下代码:

To populate my <select> i use this code:

export default {
    data() {
       return {
           tipoUsuarios:[],
         }
    },
method: {
   getTipoUsuario() {
     axios.get("http://localhost:50995/api/GetTipoUsuario")
     .then(response => {
           this.tipoUsuarios = response.data,
           this.status = response.data
      })
      .catch(e => {
           console.log(e)
      })
   }
}

这是我目前的POST方法:

This is my POST method for now:

 addUsuario() {
            axios.post("http://localhost:50995/api/PostUsuario", {
                "Nombre": this.nombre,
                "ApellidoP": this.apellidoP,
                "ApellidoM": this.apellidoM,
                "Email": this.email,
                "NombreUsuario": this.nombreUsuario,
                "Contrasena": this.password
            })

        },

当我选择<select>的一个选项时，我需要使用ID的值生成一个POST.

I need to generate a POST with the value of the ID when i select one option of the <select>.

谢谢.

推荐答案

您必须在<select>上将v-model设置为数据属性以存储所选值，然后将:value添加到.

You have to set a v-model on the <select> to a data property to store the selected value, and add the :value to the <option>.

new Vue({
  el: '#example',
  data: {
    types: [{id: 1, name: 'admin'}, {id: 2, name: 'user'}],
    selectedType: 1
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="example">
  <select v-model="selectedType">
      <option 
          v-for="item in types" :value="item.id">
         {{ item.name }}
      </option>
  </select>
  Selected: {{ selectedType }}
</div>

看看表单输入Bindigs:选择中的示例官方文件

这篇关于如何获取由axios和Vue填充的选择的ID值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！