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

hc8w905p  于 2023-03-03  发布在  Vue.js
关注(0)|答案(2)|浏览(157)

我们实现了一个简单的带有基本表单的nuxt应用程序,并将其部署到netlify上。当按下表单的“提交”按钮时,我们收到一个404。
您可以在此处找到已部署netlify应用的链接:
编辑-〉删除链接
在浏览了故障排除指南之后,他们列出了如果netlify识别了您的表单,则添加的“netlify”或“data-netlify=“true”属性应该不可见,但是它们是可见的。
另外,在netlify后端的“form”配置选项卡中找不到表单。
新配置:
SPA
顺风
我们尝试为netlify添加必要的属性:网络化或数据-网络化=“真”&网络生命-蜜罐=“僵尸-字段”
我们还添加了一个名为prerender-spa-plugin的“预渲染”库。
在这里你可以找到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最终识别我们的形式,那就太好了。

vfh0ocws

vfh0ocws1#

Netlify自带内置表单处理功能,我们的构建机器人在部署时直接解析HTML文件,因此您无需调用API或在网站上添加额外的JavaScript。
部署时,表单必须位于呈现的文件中。SPA模式的问题是,没有一个页面实际呈现为HTML。您可以通过右键单击页面,然后单击“查看页面源”来检查此问题。您将无法找到表单。
Netlify在他们的文档中解决了这个问题。
他们有一个专门的帖子来修复Vue应用程序here的这个问题
在这个问题上再深入一点,我们在这里找到了一个Nuxt解决方案:
将以下内容放入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>

来自帖子:
您只需要确保将其隐藏在Vue组件中,以便Netlify将表单提交识别为与名为MYFORM的表单相关联。我认为您还需要确保您希望接收数据的所有输入都在这两个表单上。

yc0p9oo0

yc0p9oo02#

为了补充@hmilbradt的回答,动态表单的动作路径应该与静态表单的路径匹配。如果静态表单的路径是/form/contact.html,那么动态表单中的动作或路径也应该是/form/contact.html。我花了很多时间来解决这个问题。在我的例子中,我发送了一个 AJAX 请求:

await fetch('/forms/contact.html', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams(formData).toString(),
    });

相关问题