VueJS表单项json post

Question

我有一个表单，当单击此表单中的“新 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>

Answer 1

编辑了我的答案以处理您的新构建和结构。

显示以下两种方法：

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>