Netlify 无法识别 nuxt 应用程序中的表单

Question

我们实现了一个具有基本形式的简单 nuxt 应用程序并将其部署到 netlify。当按下表单的 "Submit" 按钮时，我们收到 404.

在这里您可以找到 link 部署的 netlify 应用程序：
编辑 -> 删除 Link

在查看故障排除指南后，他们列出了如果 netlify 识别了您的表单，添加的 "netlify" 或 "data-netlify="true" 属性应该不可见，但它们是。

此外，无法在 netlify 后端的 "form" 配置选项卡中找到该表单。

Nuxt 配置：
SPA
顺风

我们尝试为 netlify 添加必要的属性：网络化或 data-netlify="true" & netlify-honeypot="bot-field"

我们还添加了一个名为 prerender-spa-plugin 的 "pre-render" 库。

在这里您可以找到 contact.vue 页面内容。根据 netlify 文档设置具有 "name" 属性的简单形式。

<template>
  <div>
    <form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field">
      <p class="hidden">
        <label
          >Don’t fill this out if you're human: <input name="bot-field"
        /></label>
      </p>
      <p>
        <label
          >Name
          <input
            type="text"
            name="name"
            class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white;"
        /></label>
      </p>
      <p>
        <label
          >Email
          <input
            type="email"
            name="email"
            class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white;"
        /></label>
      </p>
      <p>
        <button
          type="submit"
          name="submit"
          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
        >
          Send
        </button>
      </p>
    </form>
  </div>
</template>

<script>
export default {};
</script>

<style>
.hidden {
  display: none;
}
</style>

如果我们能解决这个问题就太好了，这样 netlify 终于可以识别我们的表单了。

Answer 1

Netlify comes with built-in form handling. Our build bots do it by parsing your HTML files directly at deploy time, so there’s no need for you to make an API call or include extra JavaScript on your site.

表单需要在部署时包含在呈现的文件中。 SPA 模式的问题是 none 页面实际上呈现为 HTML。您可以通过右键单击页面并单击 "View Page Source" 来检查这一点。您将无法找到该表格。

Netlify 在他们的文档中解决了这个问题 here。

他们有一个特定的 post 用于为 Vue 应用修复此问题 here

对该问题进行更多挖掘，我们找到了一个 Nuxt 解决方案 here：

将以下内容放入 static/form-dummy/index.html:

<form name="MYFORM" action="/form/success" netlify>
  <!-- form controls here -->
</form>

将以下内容放在 pages/form/index.vue 中（或者每当您命名 Vue 文件时）

<form name="MYFORM" action="/form/success" method="post">
  <input type="hidden" name="form-name" value="MYFORM" />
  <!-- form controls here -->
</form>

来自post：

You just need to make sure you add that hidden in the Vue component so that Netlify recognises the form submission as associated with the form called MYFORM. I think you also need to ensure all the inputs you want to receive data for are on both forms.

Netlify 无法识别 nuxt 应用程序中的表单

Netlify does not recognize form in nuxt app

forms

vue.js

netlify

nuxt.js