Lwc 데이터 바인딩이 작동하지 않음

Question

안녕하세요 Salesforce StackExchange!

범위 내에서 데이터 바인딩을 시도하고 있지만 작동하지 않습니다. 정의되지 않은 결과가 반환되지만 크롬 개발 콘솔의 데이터로 스팬이 렌더링되었음을 확인할 수도 있습니다. 이는 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. pointer-events: none;이벤트가 트리거되는 위치를 제어 할 수 있도록 자식 에서 css 속성을 사용합니다 .