Lwcデータバインディングが機能しない

Question

Salesforce StackExchangeさん、こんにちは。

スパン内でデータバインドしようとしていますが、機能しません。未定義の結果が返されますが、Chrome開発コンソールからのデータでスパンがレンダリングされていることもわかります。これはonclick = {handelBadgeSelected}で発生しています

誰かが私を正しい方向に向けて、私が間違っていることを教えてもらえますか？

HTMLは次のとおりです。

<template for:each={selectedbadges} for:item="selectedbadge">
                            <div key={selectedbadge.Id} class="slds-visual-picker slds-visual-picker_small">
                                <input type="radio" id={selectedbadge.Id} value={selectedbadge.Id} name="options" />
                                <label>
                                    <span data-name={selectedbadge.Name} onclick={handelBadgeSelected}
                                        class="slds-visual-picker__figure slds-visual-picker__icon slds-align_absolute-center">
                                        <span class="slds-is-selected">
                                            <span class="slds-icon_container">
                                                <img aria-hidden="true" src={selectedbadge.ImageUrl} />
                                            </span>
                                        </span>
                                        <span class="slds-is-not-selected">
                                            <span class="slds-icon_container">
                                                <img aria-hidden="true" src={selectedbadge.ImageUrl} />
                                            </span>
                                        </span>
                                    </span>
                                    <span class="slds-visual-picker__body">
                                        <span class="slds-text-title">{selectedbadge.Name}</span>
                                    </span>
                                </label>
                            </div>
                        </template>

そしてここにJSがあります

handelBadgeSelected(event) {
  window.console.log('Selected Badge Info:',  event.target.dataset.name);
}

エラー：

Answer 1

完全にはわかりませんが、ネストされた要素がいくつかあるという事実から問題が発生していると思います。見てみましょう：

<span data-name={selectedbadge.Name} onclick={handelBadgeSelected}
                                        class="slds-visual-picker__figure slds-visual-picker__icon slds-align_absolute-center">
                                        <span class="slds-is-selected">
                                            <span class="slds-icon_container">
                                                <img aria-hidden="true" src={selectedbadge.ImageUrl} />
                                            </span>
                                        </span>
                                        <span class="slds-is-not-selected">
                                            <span class="slds-icon_container">
                                                <img aria-hidden="true" src={selectedbadge.ImageUrl} />
                                            </span>
                                        </span>
                                    </span>

この例では、親スパンがあります<span data-name={selectedbadge.Name} onclick={handelBadgeSelected}。ただし、その中には他にもいくつかのスパンとimgタグがあります。したがって、親をクリックすると、spanおそらく実際には子の1つをクリックしていることになり、イベントは親スパンに伝播します。ただし、eventこれはdata-name属性を持たない子からのものです。

これを解決する方法は、次のいずれかです。

1. 入れてdata-name={selectedbadge.Name}、すべての子どもたちにOR
2. pointer-events: none;子でcssプロパティを使用して、イベントのトリガー元を制御できるようにします。