Lwc Data Binding çalışmıyor

Question

Hey Salesforce StackExchange!

Bir aralık içinde veri aramaya çalışıyorum ama işe yaramıyor. Tanımsız Sonucu geri alıyorum, ancak aralığın chrome dev konsolundan gelen verilerle işlendiğini de görebiliyorum. Bu, onclick = {handelBadgeSelected} üzerinde gerçekleşiyor

Lütfen birisi beni doğru yöne işaret edebilir ve bana neyi yanlış yaptığımı söyleyebilir mi?

İşte 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>

Ve işte JS

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

Hata:

Answer 1

Tam olarak emin değilim, ancak probleminizin birkaç iç içe geçmiş öğeye sahip olmanızdan kaynaklandığına inanıyorum. Hadi bir bakalım:

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

Bu örnekte ebeveyn açıklığınız var <span data-name={selectedbadge.Name} onclick={handelBadgeSelected}. Bununla birlikte, içinde birkaç başka aralık ve img etiketiniz var. Dolayısıyla, üst öğeye spantıkladığınızda, muhtemelen aslında çocuklardan birine tıklıyorsunuz ve ardından olay, üst yayılma alanına yayılıyor. Ancak, eventbir data-nameözelliği olmayan çocuktan geliyor .

Bunu çözmenin yolu şunlardan birini yapmaktır:

1. data-name={selectedbadge.Name}Tüm çocukları giyin VEYA
2. pointer-events: none;Çocuklarda css özelliğini kullanmak, böylece olayın nereden tetiklendiğini kontrol edebilirsiniz.