axios - VueJS表单项json post
问题描述
我有一个表单，当在此表单中单击“新 iban”按钮时，他可以添加任意数量的“iban”输入。同样，当点击“添加项目”按钮时，可以添加尽可能多的条目，并且可以看到“SPINNET”。但是当我发布它们时，输入值返回空。我希望它以“iban”和“权威”json 格式发送。
new Vue({
el: "#app",
data() {
return {
data: {
name: "",
iban: "",
yetkili: "",
},
sections: [{
ibans: [{
item: ""
}]
}],
yetkisection: [{
yetkililer: [{
yetkiliadi: "",
yetkilieposta: "",
yetkilitelefon: "",
yetkilinotu: "",
}]
}],
}
},
methods: {
addNewItem(id) {
this.sections[id].ibans.push({
item: ''
});
},
removeItem(sectionIndex, ibanIndex) {
this.sections[sectionIndex].ibans.splice(ibanIndex, 1);
},
addNewYetkili(id) {
this.yetkisection[id].yetkililer.push({
yetkiliadi: ''
});
},
removeYetkili(sectionIndex, ibanIndex) {
this.yetkisection[sectionIndex].yetkililer.splice(ibanIndex, 1);
},
async addTag() {
const res = await this.callApi('post', 'app/create_musteri', this.data)
if (res.status === 200) {
console.log(res)
} else {
console.log("error");
}
}
},
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template>
<div class="container">
<div class="col-12">
<div class="mb-1 row">
<div class="col-sm-3">
<label class="col-form-label"><span><i data-feather='file-text'></i></span>NAME</label>
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Item" v-model="data.name">
</div>
</div>
</div>
<div class="col-12 sections" v-for="(section, sectionIndex) in sections">
<div class="mb-1 row" v-for="(iban, ibanIndex) in section.ibans">
<div class="col-sm-3">
<label class="col-form-label" for="iban"><span><i data-feather='file-text'></i></span>IBAN NUMBER</label>
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Item" v-model="iban.item">
<span v-if="section.ibans.length>1"
class="float-right" style="cursor:pointer" @click="removeItem(sectionIndex, ibanIndex)">X</span>
</div>
</div>
<button class="btn btn-success mt-5 mb-5" @click="addNewItem(sectionIndex)">New Iban</button>
</div>
<div>
<div>
<table class="fatura-table">
<colgroup>
<col style="width: 25%;;">
<col style="width: 25%;;">
<col style="width: 25%;;">
<col style="width: ;">
<col style="width: 70px;">
</colgroup>
<thead>
<tr>
<th>YETKİLİ KİŞİNİN ADI</th>
<th>E-POSTA</th>
<th>TELEFON</th>
<th>NOTLAR</th>
<th></th>
</tr>
</thead>
</table>
</div>
<section v-for="(section, sectionIndex) in yetkisection">
<div class="card-body" v-for="(yetkili, ibanIndex) in section.yetkililer">
<div class="row">
<div class="col-sm-3 col-12 mb-1 mb-sm-0 hizmet">
<div class="form-floating">
<input type="text" class="form-control" v-model="yetkili.yetkiliadi" placeholder=" "/>
<label>YETKİLİ KİŞİNİN ADI</label>
</div>
</div>
<div class="col-sm-3 col-12 mb-1 mb-sm-0 hizmet">
<div class="form-floating">
<input type="text" class="form-control" v-model="yetkili.yetkilieposta" placeholder=" "/>
<label>E-POSTA</label>
</div>
</div>
<div class="col-sm-2 col-12 mb-1 mb-sm-0 hizmet">
<div class="form-floating">
<input type="text" class="form-control" v-model="yetkili.yetkilitelefon" placeholder=" "/>
<label>TELEFON</label>
</div>
</div>
<div class="col-sm-3 col-12 mb-1 mb-sm-0 hizmet">
<div class="form-floating">
<input type="text" class="form-control" v-model="yetkili.yetkilinotu" placeholder=" "/>
<label>NOTLAR</label>
</div>
</div>
<div class="col-sm-1 col-12 mb-1 mb-sm-0">
<button class="btn btn-icon btn-secondary waves-effect waves-float waves-light" @click="removeYetkili(sectionIndex, ibanIndex)">
<i data-feather='x'>DELETE</i>
</button>
</div>
</div>
</div>
<div class="mt-1">
<div class="col-12 px-0">
<button type="button" class="btn btn-primary btn-sm btn-add-new" data-repeater-create @click="addNewYetkili(sectionIndex)">
<i data-feather="plus" class="me-25"></i>
<span class="align-middle">Add Item</span>
</button>
</div>
</div>
</section>
</div>
<button @click="addTag" class="btn btn-dark data-submit">SAVE</button>
</div>
</template>
</div>解决方案
编辑了我的答案以处理您的新构建和结构。
显示以下两种方法：
new Vue({
el: "#app",
data() {
return {
data: {
name: "",
iban: "",
yetkili: ""
},
sections: [{ item: "" }],
yetkisections: [
{
yetkiliadi: "",
yetkilieposta: "",
yetkilitelefon: "",
yetkilinotu: ""
}
]
};
},
methods: {
addNewItem() {
this.sections.push({ item: "" });
},
removeItem(sectionIndex) {
this.sections.splice(sectionIndex, 1);
},
addNewYetkili() {
this.yetkisections.push({ yetkiliadi: "" });
},
removeYetkili(yetkisectionIndex) {
this.yetkisections.splice(yetkisectionIndex, 1);
},
async addTag() {
/* const res = await this.callApi('post', 'app/create_musteri', this.formData)
if (res.status === 200) {
console.log(res)}
else {
console.log("error");
} */
console.log(this.$data);
console.log(this.formData);
}
},
computed: {
formData() {
return {
data: {
...this.data,
sections: this.sections,
yetkisection: this.yetkisections
}
};
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template>
<div class="container">
<div class="col-12">
<div class="mb-1 row">
<div class="col-sm-3">
<label class="col-form-label"
><span><i data-feather="file-text"></i></span>NAME</label
>
</div>
<div class="col-sm-6">
<input
type="text"
class="form-control"
placeholder="Item"
v-model="data.name"
/>
</div>
</div>
</div>
<div
class="col-12 sections"
v-for="(section, sectionIndex) in sections"
:key="sectionIndex"
>
<div class="col-sm-3">
<label class="col-form-label" for="iban"
><span><i data-feather="file-text"></i></span>IBAN NUMBER</label
>
</div>
<div class="col-sm-6">
<input
type="text"
class="form-control"
placeholder="Item"
v-model="section.item"
/>
<span
v-if="sections.length > 1"
class="float-right"
style="cursor: pointer"
@click="removeItem(sectionIndex)"
>X</span
>
</div>
</div>
<button class="btn btn-success mt-5 mb-5" @click="addNewItem()">
New Iban
</button>
<div>
<div>
<table class="fatura-table">
<colgroup>
<col style="width: 25%;;" />
<col style="width: 25%;;" />
<col style="width: 25%;;" />
<col style="width: ;" />
<col style="width: 70px;" />
</colgroup>
<thead>
<tr>
<th>YETKİLİ KİŞİNİN ADI</th>
<th>E-POSTA</th>
<th>TELEFON</th>
<th>NOTLAR</th>
<th></th>
</tr>
</thead>
</table>
</div>
<section>
<div
class="card-body"
v-for="(yetkili, yetkisectionIndex) in yetkisections"
:key="yetkisectionIndex"
>
<div class="row">
<div class="col-sm-3 col-12 mb-1 mb-sm-0 hizmet">
<div class="form-floating">
<input
type="text"
class="form-control"
v-model="yetkili.yetkiliadi"
placeholder=" "
/>
<label>YETKİLİ KİŞİNİN ADI</label>
</div>
</div>
<div class="col-sm-3 col-12 mb-1 mb-sm-0 hizmet">
<div class="form-floating">
<input
type="text"
class="form-control"
v-model="yetkili.yetkilieposta"
placeholder=" "
/>
<label>E-POSTA</label>
</div>
</div>
<div class="col-sm-2 col-12 mb-1 mb-sm-0 hizmet">
<div class="form-floating">
<input
type="text"
class="form-control"
v-model="yetkili.yetkilitelefon"
placeholder=" "
/>
<label>TELEFON</label>
</div>
</div>
<div class="col-sm-3 col-12 mb-1 mb-sm-0 hizmet">
<div class="form-floating">
<input
type="text"
class="form-control"
v-model="yetkili.yetkilinotu"
placeholder=" "
/>
<label>NOTLAR</label>
</div>
</div>
<div class="col-sm-1 col-12 mb-1 mb-sm-0">
<button
class="btn btn-icon btn-secondary waves-effect waves-float waves-light"
@click="removeYetkili(yetkisectionIndex)"
>
<i data-feather="x">DELETE</i>
</button>
</div>
</div>
</div>
<div class="mt-1">
<div class="col-12 px-0">
<button
type="button"
class="btn btn-primary btn-sm btn-add-new"
data-repeater-create
@click="addNewYetkili()"
>
<i data-feather="plus" class="me-25"></i>
<span class="align-middle">Add Item</span>
</button>
</div>
</div>
</section>
</div>
<button @click="addTag" class="btn btn-dark data-submit">SAVE</button>
</div>
</template>
</div>推荐阅读
- angular - 在 ng-template 中使用函数强制转换变量时是否会对性能产生重大影响？
- python - Python：如何优化此代码以获得更好的性能
- python - 如何在 Django 序列化器中获取请求用户 ID？
- powershell - 仅在戴尔机器上强制更新驱动程序
- javascript - 如何为js函数添加定时器一段时间然后显示消息
- python - PySimpleGUI 日历/日期选择器的字体大小
- asp.net-mvc - 文件上传错误“对象引用未设置为对象实例”
- java - 从 React 和 Spring Boot 上传 CSV 文件
- javascript - 将新的自定义 api 方法定义添加到 Jest 命名空间
- r - 绘图时如何将日期值的缩放标签从数字格式更改为日期格式？