Nuxt / Netlify 表单返回空表单数据字段答案

【问题标题】：Nuxt / Netlify Form returning empty form data fieldsNuxt / Netlify 表单返回空表单数据字段
【发布时间】：2021-01-30 22:56:45
【问题描述】：

我正在使用 Nuxt 和 Netlify 表单作为联系表单，一切都按预期工作（验证、提交成功）但是我在提交时收到空表单字段。我尝试匹配 v-model 和表单名称但没有成功。我是否必须更改 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>

【问题讨论】：

标签： javascript vue.js nuxt.js netlify

【解决方案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
  }
}

【讨论】：

【解决方案2】：

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

如果您将 Nuxt 用作静态站点您似乎没有将表单值绑定到您发送给 Netlify 的字段

更换可能是安全的

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

与

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

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

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

【讨论】：