Приложение Vue с формой Netlify вызывает привязку ошибки к событиям

Я пытаюсь скрыть / показать 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, вводящим что-то в форму.


netlify vue.js nuxt.js vuejs2
person Peter Piper    schedule 31.03.2019    source источник
comment
Когда я читаю, netlify проанализирует html. И изменит его, что обязательно приведет к ошибкам несоответствия dom, и он не будет работать с vue   -  person Aldarund    schedule 31.03.2019

Ответы (1)


arrow_upward
1
arrow_downward

В Netlify руководство по Netlify Forms + Vue, они говорят, что способ визуализации SPA может помешать ботам Netlify редактировать HTML-форму, чтобы связать ее со своими сервисами.

По умолчанию Vue отображает клиентскую часть, но боты постобработки Netlify ожидают развертывания HTML на сайте. Любые теги атрибутов формы netlify, включенные в приложение Vue, будут вставлены только в клиентскую часть DOM, а не в HTML, и, таким образом, рискуют быть полностью проигнорированными сборщиками.

Чтобы справиться с этим, у вас есть два варианта. Вы можете выполнить предварительный рендеринг своего приложения или добавить форму netlify в свой статический HTML-файл в общей папке.

Таким образом, либо предварительно отрендерите свой HTML (что дает дополнительную скорость и бонус SEO), либо предоставьте netlify статическую форму для присоединения, которую вы затем можете скрыть и заменить своей красивой формой Vue на клиенте.

person Luke Storry    schedule 24.07.2020