title: How can i post Array Data with Vue axios from Data obtained from an API
body: <p>I am facing a problem where I have a form with inputs generated dynamically based on the results returned from the API. I can get the data successfully with Axios, but the problem is that when I want to post the entered data array by the user back to the api, I can't.</p>
  
  <p>The Template is as shown here:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form @submit.prevent="getReference" class="form-material form-horizontal"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-6"
        v-for="(item, index) in items"
        :key="item.id"&gt;
        &lt;div class="card bg-light-inverse ribbon-wrapper"&gt;
          &lt;div class="card-block"&gt;
            &lt;div class="ribbon ribbon-danger"&gt;{{index + 1}}&lt;/div&gt;
            &lt;div class="row ribbon-content"&gt;
  
              &lt;input v-model="item.id" /&gt;
              &lt;label class="col-md-12 text-themecolor"&gt;Enter Amount To Pay&lt;/label&gt;
              &lt;div class="card col-md-12 m-t-10"&gt;
                &lt;input
                  v-model.number="item.amount"
                  type="number"
                  class="form-control"
                  placeholder
                  max
                  min
                /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;button
      class="btn btn-rounded btn-outline-danger waves-effect waves-dark"
    &gt;Get Refrence&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And the JS code is:</p>
  
  <pre class="lang-js prettyprint-override"><code>export default {
    data() {
      return {
        items: {},
        item: []
      };
    },
    created() {
      let uri = `/Api/${this.$route.params.id}/items`;
      this.axios.get(uri).then(response =&gt; {
        this.items = response.data;
      });
    },
    // could go with computed method to check if there is data but well :
    methods: {
      getReference() {
        console.log(this.item);
        let uri = "/api/reference";
        this.axios.post(uri, this.item).then(response =&gt; {
          this.$router.push({ name: "fee" });
        });
      },
    }
  };
  </code></pre>
  
  <p>When I try to post the form nothing is being sent and an error is thrown within the console <code>uncaught exception: Object</code>. I cant seem to figure out what is wrong here. </p>
  
  <p>Any help would be appreciated.</p>