VueJS form item json post

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>

Salvino D'sa · Accepted Answer · 2021-08-17 20:01:52Z

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>

Collectives™ on Stack Overflow

VueJS form item json post

1 Answer 1

Showing both the approaches below:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Showing both the approaches below:

Comments

Your Answer

Sign up or log in

Post as a guest

Related