Я столкнулся с проблемой с вложенной итерацией. Предположим, у меня есть одна кнопка в дочернем цикле, и я хочу, чтобы индекс родительского и дочернего цикла был как в функции onclick файла JS.

Я получаю только индекс дочернего цикла через event.target.value. Не уверен, как получить индекс родителя.

0
Moni Jaiswal 16 Сен 2020 в 18:29
Размещение вашего обработчика событий на родительском элементе должно позволить событиям от дочерних элементов всплывать и фиксироваться на родительском элементе. Есть несколько статей о распространении событий JS и событиях LWC, если вы ищете «пузырьковое событие» или «распространение события». Можете ли вы поделиться, какой код у вас сейчас есть?
 – 
nbrown
16 Сен 2020 в 18:44
Спасибо за ответ @nbrown, атрибуты данных исправили проблему.
 – 
Moni Jaiswal
16 Сен 2020 в 19:40

1 ответ

Лучший ответ

Вы можете использовать атрибуты данных для передачи дополнительной информации. Вот простая игровая площадка:

<template>
    <div key={outer.key} for:each={data} for:item="outer" for:index="outerIndex">
        Outer key: {outer.key}
        <div onclick={handleClick} key={inner} for:each={outer.data} for:item="inner" for:index="innerIndex">
            Inner Item: {inner}
            <button data-outer={outerIndex} data-inner={innerIndex}  onclick={handleClick}>Select</button>
        </div>
    </div>
    <hr />
    Output:
    {output}
</template>

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    data = [
        {key: 0, data:[1,2,3]},
        {key: 1, data:[4,5,7]},
        {key: 2, data:[7,8,9]},
    ]
    output;
    handleClick(event) {
        let outer = event.target.dataset.outer;
        let inner = event.target.dataset.inner;
        this.output = `${outer}/${inner}`;
    }
}

Демонстрация веб-компонентов

1
sfdcfox 16 Сен 2020 в 18:49
Большое спасибо @sfdcfox, вы спасли мой день :)
 – 
Moni Jaiswal
16 Сен 2020 в 19:38