Подскажите пожалуйста, застрял на этом вопросе. С vue.js вообще не силен, но нужно сделать форму обратной связи на сайте. Форма на .VUE и код на PHP который отправляет письмо на почту, но не передает введенные данные из полей пользователем. Подскажите как правильно вызвать введенные данные в PHP коде?
В PHP вызвал поля вот так:
$name = $_POST['name'];
$phone = $_POST['phone'];
$power = $_POST['power'];
$productivity = $_POST['productivity'];
$power = $_POST['power'];
$presure = $_POST['presure'];
$scope = $_POST['scope'];
А здесь они должны подставляться в письмо:
$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>
";
Код самой формы vue:
<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>
Направьте плиз, работал только с html формами.
Простой
