ein vue.js Formular posten, kann nicht $ Post in PHP bekommen

Question

Ich habe ein Formular in vue.js mit dynamischen Zeilen und ich verwende ein klassisches HTML-Formular-Tag, um die Ergebnisse in einer PHP-Seite zu erhalten.

Meine Ausgabe in PHP zeigt den $ post nicht wie erwartet. Eine jsfiddle mit dem Formular ist verfügbar;

mein Code ist wie folgt:

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> 

und ich habe das folgende Skript:

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

meine PHP-Seite action_page ist wie folgt:

<?php 
echo '$post detail'; 
foreach ($_POST as $key => $value) 
echo "Field ".htmlspecialchars($key)." is ".htmlspecialchars($value)."<br>"; 
?> 

Answer 1

Einfach Namen hinzufügen Attribut für Eingaben.

<input class="form-control" type="date" name="date" v-model="row.myDate"> 

oder dynamische

<input class="form-control" type="date" :name="'date'+index" v-model="row.myDate"> 

Versuchen Sie, diese https://jsfiddle.net/jp1zw25a/ und Prüfergebnissen in Browser dev-tools