#vue.js #netlify #gridsome
#vue.js #netlify #gridsome
Вопрос:
Итак, я пытаюсь обработать запрос формы, используя формы netlify. Все работает нормально, за исключением того, что данные не отправляются вместе с формой.
Итак, вот форма
<template>
<form @submit.prevent="handleSubmit" name="Free Assessment Form" method="post" data-netlify-honeypot="bot-field">
<span class="slogan">{{ slogan }}</span>
<input type="hidden" name="form-name" value="contact" class="hidden"/>
<input @input="ev => formData.business_name = ev.target.value" type="text" name="Business Name" placeholder="Business Name" :class="{'input-error': error}" @change="error = false">
<input @input="ev => formData.first_name = ev.target.value" type="text" name="First Name" placeholder="First Name" :class="{'input-error': error}" @change="error = false">
<input @input="ev => formData.last_name = ev.target.value" type="text" name="Last Name" placeholder="Last Name" :class="{'input-error': error}" @change="error = false">
<input @input="ev => formData.email = ev.target.value" type="email" name="Email" placeholder="Email" :class="{'input-error': error}" @change="error = false">
<input @input="ev => formData.phone = ev.target.value" type="text" name="Phone Number" placeholder="Phone Number" :class="{'input-error': error}" @change="error = false">
<button type="submit" class="form-btn">Submit</button>
</form>
</template>
<script>
export default {
name: 'Form',
props: ['slogan'],
data() {
return {
formData: {},
error: false
}
},
methods: {
encode(data) {
return Object.keys(data)
.map(key => encodeURIComponent(key) '=' encodeURIComponent(data[key]))
.join('amp;')
},
handleSubmit(e) {
fetch('/', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: this.encode({
'form-name': e.target.getAttribute('name'),
...this.formData
}),
})
.then(() => {
this.formData = ""
this.$router.push('/')
alert('Form Submitted!')
})
.catch(error => alert(error))
}
}
}
</script>
Теперь, когда форма отправлена, я получаю электронное письмо, как и ожидалось, однако я получаю только ключи формы. Я не получаю значения ключа формы.
В моей локальной разработке, когда я утешаю.войдите в data
переданный метод encode, все это есть, поэтому я не понимаю, почему он не работает.
Комментарии:
1. Я получаю то же самое. Вы когда-нибудь находили исправление?
2. Я переключился на использование
v-model="formData.name"
вместо@input="ev => formData.name = event.target.value"