はじめに

マイクロフロントエンドを行うことになったので、Litというフレームワークの学習を始めました

そこで簡単なフロントエンドを作った際にクリックイベントでつまづいたのでまとめます

問題

以下のようなコードを作成しました

  private _imageClick() {
    console.log("Click")
  }

(省略)

          <img
            src="${this.user.topImage}"
            class="subImg"
            @click=${this._imageClick()}
          />

画像をクリックするとコンソールにClickと表示するような簡単なコンポーネントになります

しかし、なぜか画像をクリックしても発火せずコンソールに何も表示されませんでした

解決方法

@click=${this._imageClick()}
↓
@click=${this._imageClick}

としたところでうまくいきました
また引数を渡そうとしてthis._imageClick(this.user.image)のように引数を渡したのですがこれも動きませんでした

なにか方法があるのかと思いますが、そこまではまだわかりませんでした

関数側ではEventを受け取れるので、そこからhtmlの属性を使うことができます

  private _imageClick(e: Event) {
    this.topImage = (e.target as HTMLImageElement).src;
  }

おわりに

まだまだわからないことばかりですが、がんばりたいです