Lwc Data Binding не работает

Question

Привет, Salesforce StackExchange!

Я пытаюсь выполнить привязку данных внутри диапазона, но это не работает. Я получаю обратно неопределенный результат, но я также вижу, что диапазон отрисован с данными из консоли chrome dev. Это происходит onclick = {handelBadgeSelected}.

Может ли кто-нибудь указать мне правильное направление и сказать, что я делаю неправильно?

Вот 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>

А вот и JS

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

Ошибка:

Answer 1

Я не совсем уверен, но я считаю, что ваша проблема связана с тем, что у вас есть несколько вложенных элементов. Давайте взглянем:

<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 data-name={selectedbadge.Name} onclick={handelBadgeSelected}. Однако внутри у вас есть несколько других промежутков и тегов img. Поэтому, когда вы щелкаете по родительскому элементу, spanвы, вероятно, на самом деле щелкаете по одному из дочерних элементов, а затем событие распространяется на родительский диапазон. Однако eventэто исходит от ребенка, у которого нет data-nameатрибута.

Решить эту проблему можно одним из следующих способов:

1. Наденьте data-name={selectedbadge.Name}всех детей ИЛИ
2. Чтобы использовать свойство css pointer-events: none;для дочерних элементов, чтобы вы могли контролировать, откуда запускается событие.