How to pass data from VUE form to PHP handler?

Question

PHP

Please help, I'm stuck on this issue. Vue.js is not strong at all, but you need to make a feedback form on the site. A .VUE form and PHP code that sends a letter to the mail, but does not pass the data entered from the fields by the user. Tell me how to correctly call the entered data in PHP code?
In PHP called the fields like this:

$name = $_POST['name'];
$phone = $_POST['phone'];
$power = $_POST['power'];
$productivity = $_POST['productivity'];
$power = $_POST['power'];
$presure = $_POST['presure'];
$scope = $_POST['scope'];

And here they should be substituted in the letter:

$title = "Задан вопрос на сайте";
$body = "
<h2>Запрос:</h2>
<b>Имя:</b> $name<br>
<b>Номер телефона:</b> $phone<br><br>
<b>Мощность, кВ:</b> $power<br>
<b>Производительность, м3/мин:</b> $productivity<br><br>
<b>Рабочее давление, бар:</b> $presure<br>
<b>Сфера применения:</b> $scope<br><br>
";

The code for the vue form itself:

<template>
  <div class="ui-section feedback" id="feedback">
    <div class="inner">
      <div class="feedback-form">
        <div class="ui-title">Подобрать компрессор</div>
        <form @submit.prevent="submit">

          <div class="row">
            <div class="col-xs-6">
              <div class="ui-field">
                <input type="text" class="ui-input" name="name" placeholder="Ваше имя" v-model="form.name">
              </div>
            </div>

            <div class="col-xs-6">
              <div class="ui-field">
                <input type="tel" class="ui-input" name="phone" placeholder="Контактный телефон*" v-model="form.phone">
              </div>
            </div>

            <div class="col-xs-6">
              <div class="ui-field">
                <input type="text" class="ui-input" name="power" placeholder="Мощность, кВ" v-model="form.power">
              </div>
            </div>

            <div class="col-xs-6">
              <div class="ui-field">
                <input type="text" class="ui-input" name="productivity" placeholder="Производительность, м3/мин" v-model="form.productivity">
              </div>
            </div>

            <div class="col-xs-6">
              <div class="ui-field">
                <input type="text" class="ui-input" name="presure" placeholder="Рабочее давление, бар" v-model="form.presure">
              </div>
            </div>

            <div class="col-xs-6">
              <div class="ui-field">
                <input type="text" class="ui-input" name="scope" placeholder="Сфера применения" v-model="form.scope">
              </div>
            </div>

            <div class="col-xs-6">
              <div class="ui-field">
                <label for="agree" class="ui-checkbox">
                  <input type="checkbox" name="agree" v-model="agree" id="agree">
                  <div class="ui-checkbox-txt">Я согласен(а) на обработку моих персональных данных. <a href="#">Пользовательское соглашение</a></div>
                </label>
              </div>
            </div>

          </div>

          <div class="ui-centered">
            <button class="ui-btn ui-btn-big ui-btn-white" :disabled="!agree">Отправить</button>
          </div>

          
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      agree: false,
      form: {
        name: '',
        phone: '',
        power: '',
        productivity: '',
        presure: '',
        scope: ''
      }
    }
  },
  methods: {
    async submit() {
      try {
        // console.log(this.form)
        const response = await fetch('https://lite/send.php', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(this.form)
        })
        // console.log(response)
        //смотрим ответ, если нужно
        // const answer = await response.json();
        // console.log(answer);
      } catch (err) {
        console.error('Ошибка:', err);
      }
    }
  }
}

</script>

Direct pliz, worked only with html forms.

Answer 1

Instead of:

$name = $_POST['name'];
$phone = $_POST['phone'];
$power = $_POST['power'];
$productivity = $_POST['productivity'];
$power = $_POST['power'];
$presure = $_POST['presure'];
$scope = $_POST['scope'];

Just do:

$request = json_decode(file_get_contents('php://input'));
$name = $request->name;

Answer 2

The easiest way is to get formdata directly from the form element, for this you can hang a ref on the form . Well, or generate formdata from the reactive properties of the component. In general, it is not yet very clear why vue. This is if you do not want to change the PHP part.
Or you need to replace $_POST with json_decode and get the request body from php://input if you don't want to change the vue part.