Nuxt / Netlify Form返回空表格数据字段

如何解决Nuxt / Netlify Form返回空表格数据字段

我正在使用Nuxt和Netlify Forms作为联系表单，一切都按预期方式工作（验证，提交成功），但是我在提交中得到的表单字段为空。我尝试匹配v模型和表单名称，但没有成功。我是否需要更改body.encode来检索v模型字段或以某种方式获取名称字段输入的值？

标记：

               <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,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>

解决方法

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

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

，但是您永远不会根据输入内容为其设置值。我没有看到任何参考。

要么在您的v模型绑定中使用它们，要么将this.form从数据转换为计算属性，例如：

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

,

我目前也在做 Nuxt/Netlify 项目。 有3种情况

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

更换可能是安全的

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

与

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

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

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