Lwc Data Binding tidak berfungsi

Aug 21 2020

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

2 Arthlete Aug 21 2020 at 00:24

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, spanAnda mungkin benar-benar mengklik salah satu turunannya dan kemudian peristiwa tersebut menyebar ke rentang induk. Namun eventitu berasal dari anak yang tidak memiliki data-nameatribut.

Cara untuk mengatasinya adalah dengan:

  1. Pakai data-name={selectedbadge.Name}semua anak ATAU
  2. Untuk menggunakan properti css pointer-events: none;pada anak-anak sehingga Anda dapat mengontrol dari mana peristiwa tersebut dipicu.