[Vuejs]-Vuejs how to submit array

by

0👍

✅

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 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 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>
</div>

0👍

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>

Leave a comment