javascript - Nuxt / Netlify 表单返回空表单数据字段

Question

我正在使用 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>

标签： javascriptvue.jsnuxt.jsnetlify

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