Lwc Data Binding não está funcionando

Question

Ei, Salesforce StackExchange!

Estou tentando vincular dados dentro de um span, mas não funciona. Estou obtendo um resultado indefinido, mas também posso ver que o span foi renderizado com dados do console de desenvolvimento do Chrome. Isso está acontecendo em onclick={handelBadgeSelected}

Alguém poderia me apontar na direção certa e me dizer o que estou fazendo de errado?

Aqui está o 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>

E aqui está o JS

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

O erro:

Answer 1

Não tenho certeza absoluta, mas acredito que seu problema esteja no fato de você ter alguns elementos aninhados. Vamos dar uma olhada:

<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>

Neste exemplo, você tem o span pai <span data-name={selectedbadge.Name} onclick={handelBadgeSelected}. No entanto, dentro dele você tem alguns outros spans e tags img. Portanto, quando você clica no pai span, provavelmente está clicando em um dos filhos e, em seguida, o evento se propaga para o intervalo pai. No entanto, eventestá vindo da criança que não possui um data-nameatributo.

A maneira de resolver isso é:

1. Colocar data-name={selectedbadge.Name}todas as crianças OU
2. Para usar a propriedade css pointer-events: none;nos filhos, para que você possa controlar de onde o evento é acionado.