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");
      }
    }
  },
})

Salvino D&#39;sa · Accepted Answer

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
        }
      };
    }
  }
})

VueJS form item json post

Answers (1)

Showing both the approaches below:

Related Questions