El enlace de datos Lwc no funciona

Question

¡Hola, Salesforce StackExchange!

Estoy tratando de vincular datos dentro de un lapso, pero no funciona. Obtengo un resultado indefinido, pero también puedo ver que el lapso se ha procesado con datos de la consola de desarrollo de Chrome. Esto está sucediendo en onclick={handelBadgeSelected}

¿Podría alguien indicarme la dirección correcta y decirme qué estoy haciendo mal?

Aquí está el 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>

Y aquí está el JS

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

El error:

Answer 1

No estoy completamente seguro, pero creo que su problema proviene del hecho de que tiene algunos elementos anidados. Vamos a ver:

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

En este ejemplo, tiene el intervalo principal <span data-name={selectedbadge.Name} onclick={handelBadgeSelected}. Sin embargo, dentro de él tienes algunos otros tramos y etiquetas img. Entonces, cuando hace clic en el elemento principal span, probablemente esté haciendo clic en uno de los elementos secundarios y luego el evento se propaga al grupo principal. Sin embargo event, proviene del niño que no tiene un data-nameatributo.

La forma de resolver esto es:

1. Poner data-name={selectedbadge.Name}a todos los niños O
2. Para usar la propiedad css pointer-events: none;en los niños para que pueda controlar desde dónde se desencadena el evento.