L'associazione dati Lwc non funziona
Ciao Salesforce StackExchange!
Sto cercando di eseguire il databind all'interno di uno span ma non funziona. Ricevo un risultato indefinito, ma posso anche vedere che lo span è stato reso con i dati dalla console di Chrome Dev. Questo sta accadendo onclick={handelBadgeSelected}
Qualcuno potrebbe indicarmi la giusta direzione e dirmi cosa sto facendo di sbagliato?
Ecco l'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>
Ed ecco il JS
handelBadgeSelected(event) {
window.console.log('Selected Badge Info:', event.target.dataset.name);
}
L'errore:

Risposte
Non ne sono del tutto certo, ma credo che il tuo problema derivi dal fatto che hai alcuni elementi nidificati. Diamo un'occhiata:
<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>
In questo esempio hai il parent span <span data-name={selectedbadge.Name} onclick={handelBadgeSelected}
. Tuttavia al suo interno ci sono alcuni altri span e tag img. Quindi, quando fai clic sul genitore span
, probabilmente stai effettivamente facendo clic su uno dei figli e quindi l'evento si propaga allo span genitore. Tuttavia event
viene dal bambino che non ha un data-name
attributo.
Il modo per risolvere questo problema è:
- Indossa
data-name={selectedbadge.Name}
tutti i bambini OPPURE - Per utilizzare la proprietà css
pointer-events: none;
sui figli in modo da poter controllare da dove si attiva l'evento.