posting a vue.js form, cannot get $post in php - vue.js

Question

I have a form in vue.js with dynamic rows and I am using a classical HTML form tag to get the results in a php page.
My output in Php does not show the $post as expected.
A jsfiddle with the form is available;
my code is as follow:
html
<form method="post" action="action_page.php">
<div id="app">
<table class="table">
<thead>
<tr>
<td><strong>Date</strong></td>
<td><strong>Account</strong></td>
<td><strong>Debit</strong></td>
<td><strong>Credit</strong></td>
<td></td>
</tr>
</thead>
<tbody>
<tr v-for="row in rows">
<td>
<input class="form-control" type="date" v-model="row.myDate">
</td>
<td>
<v-select :options="['Account1','Account2','Account3']"></v-select>
</td>
<td>
<input class="form-control" type="text" v-model="row.debit" v-on:keypress="isNumber(event)">
</td>
<td>
<input class="form-control" type="text" v-model="row.credit" v-on:keypress="isNumber(event)">
</td>
<td ><i class="fa fa-trash-o fa-2x"style="color:brown;" #click="removeRow(row)"></i> <i class="fa fa-plus-circle fa-2x"style="color:#428bca" #click="addRow"></i> </td>
</tr>
</tbody>
<tfooter>
<td class="al-g"> <button class="button btn-primary" #click="addRow">Add Line</button></td>
<td> </td>
<td class="al-r">tot D.: {{ totaldebit | roundme }}</td>
<td class="al-r">tot Cr.:{{ totalcredit | roundme}}</td>
<td class="al-r">Dif: {{ totaldebit-totalcredit | roundme}}</td>
</tfooter>
</table>
</div>
<button class="button btn-danger" type="submit">Post</button>
</form>
</body>
and I have the following script:
<script>
Vue.filter('roundme', function (value) {
return value.toFixed(3);
})
Vue.component('v-select', VueSelect.VueSelect);
var app = new Vue({
el: "#app",
data: {
rows: [{debit:0, credit:0},
]
},
computed: {
totaldebit() {
return this.rows.reduce((total, row) => {
return total + Number(row.debit);
}, 0);
},
totalcredit() {
return this.rows.reduce((total, row) => {
return total + Number(row.credit);
}, 0);
}
},
methods: {
addRow: function() {
this.rows.push({myDate:"",
account:"",
debit: "",
credit: ""
});
},
removeRow: function(row) {
//console.log(row);
this.rows.$remove(row);
},
isNumber: function(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
evt.preventDefault();;
} else {
return true;
}
}
}
});
</script>
my php page action_page is as follow:
<?php
echo '$post detail';
foreach ($_POST as $key => $value)
echo "Field ".htmlspecialchars($key)." is ".htmlspecialchars($value)."<br>";
?>

Answer 1

Just add name attribute to inputs.
<input class="form-control" type="date" name="date" v-model="row.myDate">
or dynamical
<input class="form-control" type="date" :name="'date'+index" v-model="row.myDate">
Try this https://jsfiddle.net/jp1zw25a/ and check results in browser dev-tools