Netlify表单-空提交-Vue(网格状)

时间:2020-04-14 03:43:54

标签: javascript vue.js netlify gridsome

我不愿意这样做(共享整个代码),但是我觉得别无选择。在过去的两天里,我一直在撞墙。这是一个接一个的问题。目前,我非常接近让Forms正常工作。

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

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

如果有什么想到或想念的事情,我将非常感谢您的帮助!在此先感谢一吨。

P.S。我使用了NetlifyCSS-Tricks

中的指南

编辑

我的POST请求的参数似乎合法:

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

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

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

但是,响应有些奇怪。由于某种原因,它返回整个页面:

enter image description here

0 个答案:

没有答案