Netlify 형식의 Vue 앱이 이벤트에 오류 바인딩을 발생시킵니다.

Netlify 형식의 Vue 앱이 이벤트에 오류 바인딩을 발생시킵니다.

폼 입력에 값이 있는 경우 div를 숨기거나 표시하려고 합니다.일반 폼에서는 정상적으로 동작하지만 netlify 폼에서 구현하면 다음 오류가 발생합니다.

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 Forms + Vue에 관한 Netlify의 가이드에서는 SPA의 렌더링 방법에 따라 Netlify의 봇이 HTML을 편집하여 서비스와 링크하는 것을 방지할 수 있다고 합니다.

기본적으로는 Vue는 클라이언트 측을 렌더링하지만 Netlify 후 처리 봇은 사이트 전개 시 HTML이 필요합니다.Vue 앱에 포함된 모든 netlify 양식 속성 태그는 HTML이 아닌 DOM 클라이언트 측에만 삽입되므로 빌드 봇이 완전히 간과할 위험이 있습니다.

이 문제를 해결하려면 두 가지 옵션이 있습니다.응용 프로그램을 미리 렌더링하거나 공용 폴더의 정적 HTML 파일에 netlify 양식을 추가할 수 있습니다.

따라서 HTML을 프리렌더(속도와 SEO 보너스를 추가)하거나 netlify를 지정하여 접속할 수 있습니다.이것에 의해, 클라이언트의 Vue 폼을 숨기거나 치환하거나 할 수 있습니다.

언급URL : https://stackoverflow.com/questions/55440910/vue-app-with-netlify-form-throws-error-binding-to-events