Vuejs how to submit array

Question

I have a form that let users enter multiples input of a same field, so I set the value as an array but I can't submit the form successfully.

Error 1 : The value will always be 'undefined', I think that is because of the way that I set the array is incorrect.

Error 2 : The system can only get 1 result even thought I submit multiple input.

I only show the code that I set the array and how to submit it and not the whole ajax because it will be too many code to show.

HTML:

<div class="form-group row" id="id-inputAddDomain" v-for="(input, index) in addDomain" :key="index">
    <label class="col-sm-3 col-form-label">Domain</label>
    <div class="col-sm-9" >
        <input type="text" align="middle" v-model="input.addDomain" class="form-control input-lg">  
        <a @click="addField()"><i class="fa fa-plus-circle" ></i></a>           
        <a @click="removeField(index)"><i class="fa fa-remove" style="color:red"></i></a>
    </div>
</div>   
<button type="button" class="btn btn-default btn-submit" @click="addCompanySetting">submit</button>

vuejs:

<script>
export default {
  data() {
        return {
            addDomain: [{domain:""}],
  },
methods : {
addCompanySetting(){
            var VUE = this
            var postExtraData = '';
            var input =  _.findIndex(this.addDomain.data, { 'domain': this.input.domain });
            var postData = '&domain='+this.addDomain[input]';
            var valid = this.validator();//validation to check the input is not empty
            if(valid){
                $.ajax({
                    url:baseUrl+'/agency/account/prefer-ma',
                    type: 'POST',
                    data: postData,
                    dataType: 'json'
                }).done(function (data){
                    if(data.result == "1"){
                        VUE.inputAddPrefix = '-';
                        VUE.addDomain = null;
                        $('#addApiSettingModal').modal('toggle');
                    }
        },
},

addField() {      
  this.addDomain.push({domain:""});
},

removeField(index) {
   this.addDomain.splice(index, 1);
},

},

Answer 1

I have refactored your code and enhanced it a little bit, I've made a working sandbox for you. Sandbox link

<template>
  <div id="app">
    <div
      class="form-group row"
      id="id-inputAddDomain"
      v-for="(input, index) in addDomain"
      :key="index"
    >
      <label class="col-sm-3 col-form-label">Domain</label>
      <div class="col-sm-9">
        <input
          type="text"
          align="middle"
          v-model="input.domain"
          class="form-control"
        />
        <a @click="addField()" class="btn btn-info"
          ><i class="fa fa-plus-circle"></i
        ></a>
        <a @click="removeField(index)" class="btn btn-danger"
          ><i class="fa fa-minus" style="color: white"></i
        ></a>
      </div>
    </div>
    <button
      type="button"
      class="btn btn-success btn-submit"
      @click="addCompanySetting"
    >
      submit
    </button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "App",
  data() {
    return {
      addDomain: [{ domain: "" }],
      baseUrl: "",
    };
  },
  methods: {
    addCompanySetting() {
      console.log(this.addDomain);
      axios
        .post(this.baseUrl + "/agency/account/prefer-ma", this.addDomain)
        .then((response) => {
          if (response.data.result === "1") {
            this.inputAddPrefix = "-";
            this.addDomain = null;
            $("#addApiSettingModal").modal("toggle");
          }
        });
    },

    addField() {
      this.addDomain.push({ domain: "" });
    },

    removeField(index) {
      this.addDomain.splice(index, 1);
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>