L'associazione dati Lwc non funziona

Aug 21 2020

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

2 Arthlete Aug 21 2020 at 00:24

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 eventviene dal bambino che non ha un data-nameattributo.

Il modo per risolvere questo problema è:

  1. Indossa data-name={selectedbadge.Name}tutti i bambini OPPURE
  2. Per utilizzare la proprietà css pointer-events: none;sui figli in modo da poter controllare da dove si attiva l'evento.