LWCでカスタムデータ属性を扱うには

前回書いたこちらのpost
https://qiita.com/geeorgey/items/ff2ab9503091366dfb7d
カスタムデータ属性を使うともっと便利になるという情報を頂いたので実際にやってみたらハマったので備忘録。

属性に関しては name でも持てますが将来的に使いたくなる可能性もあるので、カスタムデータ属性(data-*)がおすすめです💡 https://t.co/g7PDGPVC7c

— Hiroki Tanaka | 田中宏樹 (@hrk623) May 28, 2021

##どうやって使うのか
ここではハイパーリンクのクリックイベントを拾うことにする。

link.html

<a href={url} onclick={handleClick} data-opid={d.Opportunity__c}>{d.Opportunity__r.Name}</a>

js側でデータを受け取る場合

link_clicked.js

    handleClick_like_opportunity(event) {
        console.log(event)
        console.log(event.target);
        console.log(event.target.dataset.opid);
    }

event.target.dataset.opid
という形式で取得できる。
分かってしまえばかんたんなんですけど、知らないと永遠にたどり着けないという罠。

大感謝

https://t.co/dtdPi66Pgm.dataset.test だったかと思います！

— Hiroki Tanaka | 田中宏樹 (@hrk623) June 1, 2021