如何获取由axios和Vue填充的选择的ID值

本文介绍了如何获取由axios和Vue填充的选择的ID值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个

<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("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("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="cdnjs.cloudflare/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:选择中的示例官方文件