Question

如果表单输入具有值，我试图隐藏/显示div。对于常规形式，这可以正常工作，但是如果我使用netlify-forms来实现，则会出现以下错误：

Unhandled promise rejection TypeError: "setting getter-only property "message""

<form name="newsletter" method="POST" data-netlify="true">
  <input @input="email = $event.target.value" type="email" name="email">
  <div :class="{'hidden': email === ''}">
     <div data-netlify-recaptcha="true" />
  </div>
</form>

我还尝试了@focus和@blur而不是@input，但错误始终相同。

在没有data-netlify="true"的情况下，它可以按预期工作，因此我怀疑它与Netlify向表单中注入内容有关。

Answer 1

在Netlify关于Netlify Forms + Vue的guide中，他们说SPA的呈现方式可以防止Netlify的漫游器对表单进行HTML编辑以将其链接到其服务。

默认情况下，Vue呈现客户端，但是Netlify后处理机器人希望在站点上部署HTML。 Vue应用程序中包含的任何netlify表单属性标签都只会插入DOM客户端，而不是HTML中，从而有可能被构建bot完全忽略。

要解决此问题，您有两个选择。您可以预呈现应用程序，也可以将netlify表单添加到公用文件夹中的静态HTML文件中。

因此，要么预渲染HTML（这会提高速度和SEO奖励），要么给netlify一个静态表单以附加自身，然后可以在客户端上隐藏并替换为漂亮的Vue表单。

具有Netlify表单的Vue应用抛出错误绑定到事件

1 个答案: