如何使用Vue axios从API获取的数据发布数组数据
如何使用Vue axios从API获取的数据发布数组数据
提问于 2020-04-08 18:24:07
我遇到了一个问题，我有一个表单，其中的输入是根据API返回的结果动态生成的。我可以使用Axios成功获取数据，但问题是，当我想将用户输入的数据数组发送回api时，我不能。
模板如下所示：
<form @submit.prevent="getReference" class="form-material form-horizontal">
<div class="row">
<div class="col-md-6"
v-for="(item, index) in items"
:key="item.id">
<div class="card bg-light-inverse ribbon-wrapper">
<div class="card-block">
<div class="ribbon ribbon-danger">{{index + 1}}</div>
<div class="row ribbon-content">
<input v-model="item.id" />
<label class="col-md-12 text-themecolor">Enter Amount To Pay</label>
<div class="card col-md-12 m-t-10">
<input
v-model.number="item.amount"
type="number"
class="form-control"
placeholder
max
min
/>
</div>
</div>
</div>
</div>
</div>
</div>
<button
class="btn btn-rounded btn-outline-danger waves-effect waves-dark"
>Get Refrence</button>
</form>JS代码是：
export default {
data() {
return {
items: {},
item: []
};
},
created() {
let uri = `/Api/${this.$route.params.id}/items`;
this.axios.get(uri).then(response => {
this.items = response.data;
});
},
// could go with computed method to check if there is data but well :
methods: {
getReference() {
console.log(this.item);
let uri = "/api/reference";
this.axios.post(uri, this.item).then(response => {
this.$router.push({ name: "fee" });
});
},
}
};当我尝试post表单时，没有任何内容被发送，并且在控制台uncaught exception: Object中抛出一个错误。我似乎找不出这里出了什么问题。
任何帮助都将不胜感激。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-08 18:38:57
您将在模板部分中以item的身份循环items，并使用item绑定输入。在发送时，您正在使用axios中的this.item。
输入数据绑定到items本身，因为您正在循环它。您可以尝试发送items，而不是axios部分中的item。
methods: {
getReference() {
console.log(this.item);
let uri = "/api/reference";
this.axios.post(uri, this.items).then(response => {
this.$router.push({ name: "fee" });
});
},
}您可以删除数据部分中的item，因为在使用相同的项在输入部分中绑定值时，它将导致问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61098426
复制相关文章
相似问题
腾讯云开发者
