How can I get the :value from input with Vuejs? - vue.js

Question

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

Answer 1

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>