はじめに
Nuxt.js で作成されたWebアプリの一部を jsで自動的に入力したいみたいな希望、ありますでしょうか(たぶんない)
しかし、普通に input.value = 'hogehoge' としただけでは、 submitButton.submit() としただけでは、DOM入力した内容が反映されないと思います
本稿では、それの解決をします
解決策
この例では、このページにあるinputタグのtypeが ｔｅｘｔ のものを参考にしています
const input = document.querySelector('input[name="text"]')
input.value = 'xxx'
+ const event = new Event('input')
+ input.dispatchEvent(event)
- document.querySelector('form').submit()
+ document.querySelector('input[name="submit"]').click()
ポイント
ポイント1
Nuxt.jsの場合、ユーザがキーボード入力した内容をNuxt.jsの内部に反映させる必要があります
この反映を実施するのが input イベントになりますので、これを dispatchEvent(...) で強制的に発火させます
これは、 input.value = 'hogehoge' と javascriptで書き換えさせるだけでは、キーボードから入力したように、変更が反映されない為です
ポイント2
ここはうろ覚えです、間違えていたらごめんなさい
Nuxt.jsで submit() イベントを発火させる場合、純粋に form.submit() させても、実際にsubmitされません(超うろ覚えポイント / もしかしたらsubmitされてるかも、間違えたらごめんなさい)
この為、 type="submit" が定義されているボタンに対して click() イベントを発火させる必要がある為、このように記述します
まとめ
- inputの内容はとりあえずいつも通り
input.value = 'hogehoge'すればよい - 入力後、
input.dispatchEvent(new Event('input'))でinputイベントを強制発火 - submitも
submit()ではなくbutton.click()でクリックイベントを発火させる
間違えていましたらご指摘をお願い致します
この記事があなたのお役に立てることを祈ります