Nuxt/Netify Form返回空的表单数据字段

Question

我正在使用Nuxt和Netlify Forms作为联系人表单，一切都如预期(验证、提交成功(，但我在提交时得到了空的表单字段。我尝试过将v型和表单名称进行匹配，但没有成功。我是否必须更改body.encode来检索v-model字段，或者以某种方式获取名称字段输入的值？

标记：

<form
name="contactForm"
method="post"
netlify-honeypot="bot-field"
data-netlify="true"
@submit.prevent="handleSubmit()"
>
<input type="hidden" name="form-name" value="contactForm" />
<div class="form-group">
<!--user name -->
<div class="floating-label">
<input
v-model="contact_name"
class="floating-input"
name="name"
type="text"
placeholder=" "
:class="{
'child-has-error': $v.contact_name.$error,
}"
/>
<label>Enter Your Name</label>
<p v-if="$v.contact_name.$dirty">
<span
v-if="!$v.contact_name.required"
class="form__alert"
>
Name is required
</span>
</p>
</div>
<!-- end user name -->
<!--user email -->
<div class="floating-label">
<input
v-model="contact_email"
class="floating-input"
type="text"
name="email"
placeholder=" "
:class="{
'child-has-error': $v.contact_email.$error,
}"
/>
<label>Enter Your Email</label>
<p v-if="$v.contact_email.$dirty">
<span
v-if="!$v.contact_email.required"
class="form__alert"
>
Email is required
</span>
<span v-if="!$v.contact_email.email" class="form__alert">
Please enter a valid email
</span>
</p>
</div>
<!-- end user email -->
<!--user message -->
<div class="floating-label">
<textarea
v-model="contact_message"
class="form-control form-control--textarea"
rows="5"
name="message"
placeholder="Enter Your Message"
:class="{ 'child-has-error': $v.contact_message.$error }"
/>
<p v-if="$v.contact_message.$dirty">
<span
v-if="!$v.contact_message.required"
class="form__alert"
>
Enter Your Message
</span>
<span
v-if="!$v.contact_message.minLength"
class="form__alert"
>
Message must be over 10 characters :)
</span>
</p>
</div>
<!-- end user message -->
</div>
<button type="submit" class="btn btn-primary">
Send Message
<font-awesome-icon far icon="arrow-right" />
</button>
</form>

脚本：

<script>
import { required, email, minLength } from 'vuelidate/lib/validators'
export default {
data() {
return {
title: 'Contact Form',
show_contact: true,
contact_name: '',
contact_email: '',
contact_message: '',
form: {
name: '',
email: '',
message: '',
},
}
},
validations: {
contact_name: {
required,
},
contact_email: {
required,
email,
},
contact_message: {
required,
minLength: minLength(10),
},
},
methods: {
encode(data) {
return Object.keys(data)
.map(
(key) => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`
)
.join('&')
},
handleSubmit() {
this.$v.$touch()
if (this.$v.$invalid) {
return true
}
fetch('/', {
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: this.encode({
'form-name': 'contactForm',
...this.form,
}),
})
// eslint-disable-next-line no-console
.then(() => {
this.show_contact = false
// eslint-disable-next-line no-console
console.log('Message Success')
})
// eslint-disable-next-line no-console
.catch((e) => console.error(e))
},
},
}
</script>

Answer 1

您一直在发送this.form作为您的数据

body: this.encode({
'form-name': 'contactForm',
...this.form,
}),

但你从来没有根据你的输入为它设置值。我没有看到任何参考资料。

要么在v-model绑定中使用这些，要么将this.form从数据转换为计算属性，如：

form() {
return {
name: this.contact_name,
email: this.contact_email,
message: this.contact_message
}
}

Answer 2

我现在也在做一个Nuxt/Netlify项目。有3种情况

1. 如果您将Nuxt用作静态站点看起来您没有将表单值绑定到要发送到Netlify的字段

更换可能是安全的

form: {
name: '',
email: '',
message: '',
},

带有

form: {
contact_name: '',
contact_email: '',
contact_message: '',
}

2. 否则，假设您将Nuxt用作SPA，并在此示例中使用静态替代形式

您的替代表单必须包含与实际表单字段同名的字段。否则，您的表单将被提交，但不会在NetlifyUI上显示，因为他们的构建机器人不需要这些表单字段。