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  id="id-inputAddDomain" v-for="(input, index) in addDomain" :key="index">
    <label >Domain</label>
    <div  >
        <input type="text" align="middle" v-model="input.addDomain" >  
        <a @click="addField()"><i  ></i></a>           
        <a @click="removeField(index)"><i  style="color:red"></i></a>
    </div>
</div>   
<button type="button"  @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);
},

},

CodePudding user response：

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
      
      id="id-inputAddDomain"
      v-for="(input, index) in addDomain"
      :key="index"
    >
      <label >Domain</label>
      <div >
        <input
          type="text"
          align="middle"
          v-model="input.domain"
          
        />
        <a @click="addField()" 
          ><i ></i
        ></a>
        <a @click="removeField(index)" 
          ><i  style="color: white"></i
        ></a>
      </div>
    </div>
    <button
      type="button"
      
      @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>

CodePudding user response：

Observations :

• As you don't have any addDomain property in your input objet. Hence it should be v-model="input.domain" instead of v-model="input.addDomain".
• addDomain is an array. You don't have any data property in addDomain.
• As we don't have any input property in our data. Hence, this.input.domain will return undefined.

Working Demo :

new Vue({
  el: "#app",
  data: {
    addDomain: [{
        domain: 'www.abc.com'
    }, {
        domain: 'www.def.com'
    }, {
        domain: 'www.ghi.com'
    }, {
        domain: 'www.jkl.com'
    }, {
        domain: 'www.mno.com'
    }]
  },
  methods: {
    addCompanySetting() {
      // Add your logic here
        console.log('input domains', this.addDomain);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div  id="id-inputAddDomain" v-for="(input, index) in addDomain" :key="index">
    <label >Domain</label>
    <div >
      <input type="text" align="middle" v-model="input.domain" />  
      <a @click="addField()"><i  ></i></a>           
      <a @click="removeField(index)"><i  style="color:red"></i></a>
    </div>
  </div>   
<button type="button"  @click="addCompanySetting">submit</button>
</div>