Блог

У меня есть 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 в рамках модернизации приложения.

Я намерен использовать мою новую форму Vue, которую я ввел на страницу php, и скрыть старую встроенную таблицу, которая отображается через ‘echo`. Это позволит мне продолжать использовать всю старую логику PHP при модернизации приложения.

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

Как я могу написать метод для моей новой кнопки отправки (Vue), которая принимает мои значения Vue выше и заполняет ими форму PHP в верхней части экрана, а затем отправляет форму PHP?

Вот доказательство концепции, которое может помочь. Допустим, это ваше приложение Vue form:

 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 для обновления и отправки старой формы.