vue.js - 具有 Netlify 表单的 Vue 应用程序抛出绑定(bind)到事件的错误

Question

如果表单输入有值，我试图隐藏/显示一个 div。这适用于常规形式，但如果我用 netlify-forms 实现它我收到以下错误:

未处理的 promise 拒绝 TypeError:“设置 getter-only 属性“消息””

<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 向表单中注入(inject)一些东西有关。

Answer 1

在 Netlify 的 guide在 Netlify Forms + Vue 上，他们说 SPA 的呈现方式可以防止 Netlify 的机器人对表单进行 HTML 编辑以将其与他们的服务链接。

By default Vue renders client side but the Netlify post processing bots expect HTML on site deploy. Any netlify form attribute tags included in a Vue app would only be inserted into the DOM client-side, rather than in the HTML and thereby runs the risk of being totally overlooked by the build bots.

To handle this, you have two options. You can either pre-render your application or add the netlify form to your static HTML file in your public folder.

因此，要么预渲染您的 HTML(这会增加速度和 SEO 奖励)，要么给 netlify 一个静态表单以附加到它，然后您可以在客户端上隐藏并替换为您漂亮的 Vue 表单。