Question

我在vue.js中有一个带有动态行的表单，我使用经典的HTML表单标签在php页面中获取结果。

我在Php中的输出没有按预期显示$ post。可以使用表单jsfiddle;

我的代码如下：

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>

我有以下脚本：

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

我的php页面action_page如下：

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

Answer 1

只需在输入中添加名称属性即可。

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

或动态

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

试试此https://jsfiddle.net/jp1zw25a/并在浏览器开发工具中查看结果

发布一个vue.js表单，无法在php中获得$ post

1 个答案: