У меня есть итерируемый компонент, который выглядит так:

<aura:iteration items="{!v.cartLineItems}" var="cartItem" indexVar="index">
    <tr aura:id="cartTableRow" id="{!index}">

        <td class="productName">
            <ui:outputText value="{!cartItem.productName}"/>
        </td>

        <td>
            <lightning:dualListbox class="darkText" name="languages"                  
            sourceLabel="Available"
            selectedLabel="Selected"
            options="{!v.options}"
            onchange="{!c.handleChange}"
            />
        </td>

    </tr>
    <lightning:input aura:id="hiddenInput" value="{!cartItem}" class="slds-hidden hiddenInput" />
</aura:iteration>

cartItem имеет свойство productCode. Я хочу передать это свойство обратно в свой контроллер и в handleChange. Как я могу это сделать?

handleChange: function(component, event) {
        var selectedOptionValue = event.getParam("value");    
    },

Могу ли я сделать что-то подобное в своем компоненте:

<aura:iteration items="{!v.cartLineItems}" var="cartItem" indexVar="index">
        <tr aura:id="cartTableRow" id="{!index}">

        <td class="productName">
            <ui:outputText value="{!cartItem.productName}"/>
        </td>

        <td>
            <lightning:dualListbox class="darkText" name="languages"                  
            sourceLabel="Available"
            selectedLabel="Selected"
            options="{!v.options}"
            onchange="{!c.handleChange}"
            cartItem="{!cartItem}"
            />
        </td>

    </tr>
    <lightning:input aura:id="hiddenInput" value="{!cartItem}" class="slds-hidden hiddenInput" />
</aura:iteration>

И что-то вроде этого в моем контроллере:

handleChange: function(component, event) {
        var selectedOptionValue = event.getParam("value");
        var cartItem = event.getParam("cartItem");  
    },
0
Luke Bray 27 Апр 2020 в 16:40

1 ответ

Вы не можете установить такой атрибут в Ауре. Атрибут должен существовать в компоненте, чтобы избежать ошибок компилятора. Решение состоит в том, чтобы поместить какой-то идентификатор в элемент-оболочку; у вас в основном уже есть эта часть, вам просто нужно взять ее:

<tr aura:id="cartTableRow" data-index="{!index}">

Обратите внимание, что id не должен никогда использоваться разработчиком, потому что они могут и будут видоизменяться, чтобы быть уникальными. Вместо этого мы используем атрибут набора данных.


handleChange: function(component, event) {
  var index = event.target.closest("[data-index]").dataset.index;
  var items = component.get("v.cartLineItems");
  var cartItem = items[index];
  ...
1
sfdcfox 27 Апр 2020 в 18:14
Спасибо за ответ. Когда я делаю console.log(cartItem), в консоли ничего не появляется. Извините, я новичок в этом, поэтому изо всех сил пытаюсь отладить
 – 
Luke Bray
27 Апр 2020 в 18:38
Путем отладки я обнаружил, что event.target на самом деле null, но я не понимаю, почему. Использование event.currentTarget также возвращает null
 – 
Luke Bray
27 Апр 2020 в 19:00