Lwc Data Binding không hoạt động

Question

Xin chào Salesforce StackExchange!

Tôi đang cố gắng tìm dữ liệu bên trong một khoảng nhưng nó không hoạt động. Tôi đang nhận được Kết quả không xác định trở lại, nhưng tôi cũng có thể thấy rằng khoảng thời gian đã được hiển thị cùng với dữ liệu từ bảng điều khiển dành cho nhà phát triển chrome. Điều này đang xảy ra trên onclick = {handelBadgeSelected}

Ai đó có thể vui lòng chỉ cho tôi đi đúng hướng và cho tôi biết tôi đang làm gì sai không?

Đây là 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>

Và đây là JS

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

Lỗi:

Answer 1

Tôi không hoàn toàn chắc chắn nhưng tôi tin rằng vấn đề của bạn đến từ thực tế là bạn có một vài yếu tố lồng vào nhau. Hãy cùng xem:

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

Trong ví dụ này, bạn có khoảng cha <span data-name={selectedbadge.Name} onclick={handelBadgeSelected}. Tuy nhiên bên trong nó, bạn có một vài nhịp và thẻ img khác. Vì vậy, khi bạn nhấp vào cha mẹ, spancó thể bạn đang thực sự nhấp vào một trong các phần tử con và sau đó sự kiện truyền đến khoảng cha. Tuy nhiên, cái eventđến từ đứa trẻ không có data-namethuộc tính.

Cách để giải quyết vấn đề này là:

1. Mặc data-name={selectedbadge.Name}cho tất cả trẻ em HOẶC
2. Sử dụng thuộc tính css pointer-events: none;trên phần tử con để bạn có thể kiểm soát nơi kích hoạt sự kiện.