如何通过VueJS（Javascript）在php文件中提交表单？

Question

我有一个包含表单和表格的 PHP 文件，看起来像这样：

printf ("<form action=\"%s\" method=post>", $PHP_SELF); //this is the url
printf ("<input type=hidden name=user_id value=\"%s\">", $user_id);
printf ("<input type=hidden name=holiday_year_id value=\"%s\">", $holiday_year_id); 
printf ("<input type=\"text\" size=9 name=holiday_taken_from_date  value=\"%s\">", $from_date);
printf ("<input type=\"text\" size=9 name=holiday_taken_to_date  value=\"%s\">", $to_date);
printf ("<input type=submit name=submit_request_holiday_dates value=Submit>")
echo "</form>";

一个关键点是这一行：

printf ("<input type=submit name=submit_request_holiday_dates value=Submit>")

当前提交表单时，此行设置名为$submit_request_holiday_dates的变量。 当页面重新加载时，这个变量被捕获在一个 IF 语句中，并且进程中的下一个屏幕将呈现给用户。

我的问题

作为应用程序现代化的一部分，我在 Vue 中重建了这个表单。

我的目的是使用我注入到 php 页面的新 Vue 表单，并隐藏通过“echo”显示的旧内联表。 这将使我能够在对应用程序进行现代化改造的同时继续使用所有旧的 PHP 逻辑。

this.url,
this.userId,
this.holidayYear,
this.fromDate,
this.toDate

如何为我的新提交按钮 (Vue) 编写一个方法，该方法采用上面的 Vue 值并用它们填充屏幕顶部的 PHP 表单，然后提交 PHP 表单？

Answer 1

这是一个可以提供帮助的概念证明。 假设这是您的 Vue 表单应用程序：

var newForm = new Vue({
  el: '#new-form',
  data: {
    fromDate: null,
    toDate: null,
    oldForm: null
  },
  mounted:function(){
    /* when mounted, get old Php form */
    this.oldForm = document.forms[0]; // depends on how your html is structured
    /* hide old form */
    this.oldForm.style.display = "none";
    /* copy old form data */
    this.fromDate = this.oldForm.holiday_taken_from_date.value;
    this.toDate = this.oldForm.holiday_taken_to_date.value;
    /* etc... */
  },
  methods:{
    sendForm: function(){
      /* let's say this is the method invoked by the Vue form on submit */
      /* update old PHP form */
      this.oldForm.holiday_taken_from_date.value = this.fromDate;
      this.oldForm.holiday_taken_to_date.value = this.toDate;
      /* then submit the old form */
      this.oldForm.submit();
    }
  }
});

基本上，您的 Vue 方法仅使用 vanilla JS 来更新和提交旧表单。