VueJS form item json post - axios

Question

I have a form and when the "new iban" button is clicked in this form, he can add as many "iban" inputs as he wants.
in the same way, when the "add item" button is clicked, as many entries can be added and "SPINNET" can be seen. But when I post them, the input values ​​return empty. I want it to be sent in "iban" and "authoritative" json format.
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>

Answer 1

Edited my answer to handle your new build and structure.
Showing both the approaches below:
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>