javascript - Netlify 表单 - 空提交 - Vue (Gridsome)

Question

我讨厌这样做（分享整个代码），但我觉得我别无选择。在过去的两天里，我一直在用头撞墙。这是一个接一个的问题。目前，我非常接近让表单工作。

由于某种原因，提交了一个空字段。找不到原因，真的很难调试。

<template>
          <form
          name="add-subscriber"
          id="myForm"
          method="post"
          data-netlify="true"
          data-netlify-honeypot="bot-field"
          @submit.prevent="handleFormSubmit">
            <input type="hidden" name="form-name" value="add-subscriber" />
            <input type="email" name="email" v-model="formData.userEmail">
            <button type="submit" name="button">Subscribe</button>
          </form>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            formData: {},
        }
    },

    methods: {
        encode(data) {  
            return Object.keys(data)
                .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)
                .join("&");
            },

        handleFormSubmit(e) {
            const axiosConfig = {
                header: { "Content-Type": "application/x-www-form-urlencoded" }
            };

            axios.post(
                location.href, 
                this.encode({
                    'form-name': e.target.getAttribute("name"),
                    ...this.formData,
                }),
                axiosConfig
            )
            .then(data => console.log(data))
            .catch(error => console.log(error))
            .then(document.getElementById("myForm").innerHTML = `<div>Almost there! Check your inbox for a confirmation e-mail.</div>`)
        }
    }
}
</script>

如果有什么想到或跳到您身上，我将非常感谢您的帮助！提前致谢。

PS 我使用了来自Netlify和CSS-Tricks的指南

---

编辑

我的 POST 请求的参数似乎是合法的：

-----------------------------171747581031589150472368446206
Content-Disposition: form-data; name="form-name"

add-subscriber
-----------------------------171747581031589150472368446206
Content-Disposition: form-data; name="userEmail"

me@rasul.com
-----------------------------171747581031589150472368446206--

然而，反应有点奇怪。由于某种原因，它正在返回整个页面：