@changeイベントで発火しない

はじめに

2023年7月より未経験でエンジニアとして働いています。
普段、laravel+vue3を使ったウェブアプリの制作を担当しています。
業務を行っていく中で学んだことを発信してきたいと思います。

参考記事

HTMLElement: change イベント

何をしたかったか？

vueでフロント側の実装をしている際に、とある箇所の背景色をカラーピッカーを使って、ユーザーの好きな色に変更できる様にしよう！と実装していた時のこと。

• ユーザーがカラーピッカーで色を選ぶと上のカラーコードも連動し変わる
• カラーコードを直接入力しても色の変更ができる

上記の状態で、カラーコードの値が変更されたタイミングで、背景色を変更する様にしたかった。

<div class="border-gray-300 ">
  <span class="text-sm">カラーコード</span>
  <input
    v-model="changeBackgroundColor"
    @change="onBackgroundColorCodeChanged"/>
</div>
<div class="ml-6">
  <span class="text-sm">色を選択→</span>
  <input
    v-model="changeBackgroundColor"
    type="color"
    @click="onBackgroundColorChanged" />
</div>

何が起きたのか？

カラーピッカーで色を変えた際に、自動でカラーコードが書き換わった時にはイベントが発火しなかった。

調べてみた

参照先より

change イベントは <input>, <select>, <textarea> 要素において、ユーザーが要素の値を変更したときに発行されます。 input イベントとは異なり、 change イベントは要素の値 (value) が変更されるたびに発生するとは限りません。

自分はinput内の値が変更されるたびにイベントが発火すると思い込んでいたため、うまく取得することができなかった。

結果

今回はユーザーがカラーコードを指定して色を決めることは少ないという判断となり、カラーコードのinputは不要という実装になったが、とても勉強になった。