Nuxt.jsで作成されたテキストの入力フォームにjavascriptから文字列を入力してsubmitしたい

はじめに

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() イベントを発火させる必要がある為、このように記述します

まとめ

1. inputの内容はとりあえずいつも通り input.value = 'hogehoge' すればよい
2. 入力後、 input.dispatchEvent(new Event('input')) で input イベントを強制発火
3. submitも submit() ではなく button.click() でクリックイベントを発火させる

間違えていましたらご指摘をお願い致します
この記事があなたのお役に立てることを祈ります