Vue.js-シェア-ツイート-ブックマーク-Feedly-LINE-PocketVue.jsで作成したフォームにreCAPTCHAを組み込みたいと考えました。組み込むといっても普通のフォームであれば難なくできたのでさして難しく考えていませんでした。動作としては下記のような挙動を実装したいです。Router等で遷移して戻ってきたときにも描画(何も考えずに埋め込むとこの時描画されない)他の項目もバリデーションが全てOKであれば、reCAPTCHAのチェックボックスにチェックを入れてレスポンスのトークンを取得した時点でsubmitボタンを有効化する(「レスポンスでトークンを取得」というイベントにどうやってフックし、Vue.js側のメソッドを発火させるのか......)2分ほど放置してreCAPTCHAがexpired(タイムアウト)したら、そのタイミングでフォームデータにセットしたトークンをリセットし、submitボタンをdisabledにする(これもイベントへのフックと発火がどうすれば良いのやら)どれも直感的・自然に「そうあってほしい」という挙動だと思います。そのためにはGoogleの外部スクリプトを読み込み、それとVue.jsを連携させる必要があり、そこで四苦八苦。上手く行く見通しが立ちませんでした。vue-recaptchaして試してみることに。あっけなくできてしまいました。defer></script>HTMLはサンプル通り。}}reCAPTCHA周りのコードを抜き出すとこんな感じ。al-HaulreCAPTCHAreCAPTCHAv2この記事を書いた人アルム=バンドフルスタックエンジニアっぽい何か。LAMPやNodeからWP、gulpを使ってejs,Scss,JSのコーディングまで一通り。RasPiで遊んだり、趣味で開発したり。それはさておき、構想から一ヶ月超。[...]アルム=バンド2019年2月4日Vue.jsVue.jsを使用したフォームで、フラグによってrequired属性の出力を振り...表現が難しいですが、HTMLのinput要素があったとします。