Hi I have list like this:

<tr v-for="(post, index) in posts" v-bind:index="index">
    <td>{{ post.rut }}</td>
    <td>{{ post.names }} {{ post.father_lastname }} {{ post.mother_lastname }}</td>
    <td>
       <input type="number" class="form-control" id="exampleInputEmail1" v-bind:value="post.employee_id" @input="form.amount[post.employee_id]" placeholder="Ingresa el monto">
    </td>
</tr>

I defined in v-bind:value="" a initial value for every input of the list, then I need to send that data with axios but when I do that it does not send anything I mean I can not catch the vale for every input why? because it displays the value.. my axios is:

onSubmit(e) {
     this.loading = true; //the loading begin
     e.preventDefault();
     let currentObj = this;

     const config = {
                headers: { 'content-type': 'multipart/form-data' }
            }

            let formData = new FormData();
            formData.append('amounts', JSON.stringify(this.form.amount));

            axios.post('/api/payroll_management/store?api_token=' App.apiToken, formData, config)
            .then(function (response) {
                currentObj.success = response.data.success;
            })
            .catch(function (error) {
                console.log(error);
            });
        }

so I wonder how can I get the data from the inputs? if it returns empty this.form.amount

Thanks

CodePudding user response：

Since each post has an amount value that gets changed with the <input>, it is easier to have that value be part of the post item itself.

This is done using v-model="post.amount" (see documentation) on the <input> of each post.

This way, there is a single place where the amount value is and where it gets updated.

Then when you submit the form, you can get the an array of these amount values by using a computed property (see documentation).

For better understanding what is happening, I highly recommend going through VueJS's documentation, since it's very readable and explains everything quite well.

Now, bringing it all together, have a look at this example:

new Vue({
  el: "#app",
  data: {
    posts: [
      {
        rut: "A",
        names: "Name Name",
        father_lastname: "Lastname",
        mother_lastname: "Lastname2",
        employee_id: 5,
        amount: 5, // Default value here
      },
      {
        rut: "B",
        names: "Name Name",
        father_lastname: "Lastname",
        mother_lastname: "Lastname2",
        employee_id: 2,
        amount: 2, // Default value here
      },
    ],
  },
  computed: {
    // Make form data a computed object.
    form: function() {
      // Get only the amount values from the posts.
      // The inputs will update those automatically,
      // so these will change as well.
      let amount = this.posts.map((post, idx) => {
        return parseInt(post.amount); // parseInt() is optional here
      });
      
      return {
        amount: amount,
        // ... other stuff
      };
    },
  },
  methods: {
    getFormData: function() {
      console.log( JSON.stringify(this.form.amount) );
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<h2>Posts:</h2>
<table>
    <tr v-for="(post, index) in posts" v-bind:index="index">
        <td>{{ post.rut }}</td>
        <td>{{ post.names }} {{ post.father_lastname }} {{ post.mother_lastname }}</td>
        <td>
             <input type="number" class="form-control" v-model="post.amount">
        </td>
    </tr>
</table>
<br/>
<button v-on:click="getFormData()">Console log form data</button>

</div>