Lwc Data Binding tidak berfungsi
Hai Salesforce StackExchange!
Saya mencoba untuk databind dalam suatu rentang tetapi tidak berhasil. Saya mendapatkan kembali Hasil Tidak Terdefinisi, tetapi saya juga dapat melihat bahwa rentang telah diberikan dengan data dari konsol dev chrome. Ini terjadi di onclick = {handelBadgeSelected}
Bisakah seseorang mengarahkan saya ke arah yang benar dan memberi tahu saya apa yang saya lakukan salah?
Ini HTML-nya:
<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>
Dan inilah JS
handelBadgeSelected(event) {
window.console.log('Selected Badge Info:', event.target.dataset.name);
}
Kesalahan:

Jawaban
Saya tidak sepenuhnya yakin tetapi saya yakin masalah Anda berasal dari fakta bahwa Anda memiliki beberapa elemen bersarang. Mari lihat:
<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>
Dalam contoh ini Anda memiliki rentang induk <span data-name={selectedbadge.Name} onclick={handelBadgeSelected}
. Namun di dalamnya Anda memiliki beberapa span lain dan tag img. Jadi, ketika Anda mengklik induknya, span
Anda mungkin benar-benar mengklik salah satu turunannya dan kemudian peristiwa tersebut menyebar ke rentang induk. Namun event
itu berasal dari anak yang tidak memiliki data-name
atribut.
Cara untuk mengatasinya adalah dengan:
- Pakai
data-name={selectedbadge.Name}
semua anak ATAU - Untuk menggunakan properti css
pointer-events: none;
pada anak-anak sehingga Anda dapat mengontrol dari mana peristiwa tersebut dipicu.