const app = new Vue({
el: '#app',
data() {
return {
form: {}
}
},
methods: {
sendForm(e) {
// отменяем действие по умолчанию для кнопки Send
e.preventDefault()
console.log('Отправка JSON данных', this.form)
// используя fetch формируем запрос
fetch(
// URL куда будем отправлять запрос
e.target.action,
// параметры запроса
{
method: 'POST', // *GET, POST, PUT, DELETE
mode: 'cors', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(this.form) // тип данных, должен соответствовать "Content-Type"
}
).then(
function(response) {
// успешно получен ответ сервера на запрос
console.log('Ответ сервера', response);
},
function(error) {
// Ошибка при осуществлении запроса
console.error(error);
}
);
}
},
})
form {
flex-basis: 30%;
box-shadow: 0 0 8px 0 #e0e0e0;
height: 330px;
}
.form__wrap {
display: flex;
flex-direction: column;
max-width: 80%;
margin: 0 auto;
}
.form__wrap input {
padding: 10px;
margin-top: 20px;
}
.form__wrap input[type="submit"] {
border: none;
transition: 0.3s;
padding: 15px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<form action="https://jsonplaceholder.typicode.com/posts" @submit="sendForm">
<div class="form__wrap">
<input type="text" v-model="form.name" name="name" placeholder="Name">
<input type="text" v-model="form.surname" name="surname" placeholder="Phone">
<input type="submit" name="submit" value="Send">
</div>
</form>
</div>