如何获取跟踪的JS列表字段的值？

问题描述

我无法使用字段“名称”和“内容”来获取跟踪的JS列表的值。如果我为每个字段列出单独的列表，则效果很好。但是我不想在HTML中使用for：each。当我尝试第一种方法时，它不会抓住存储在列表中的step.Name。但是，使用第二种方法可以。

JS：

@track stepList = [];

addStep(){
    const fields = {};
    fields['Name'] = 'testName';
    fields['Content'] = 'testContent';
    const newInput = {fields};
    this.stepList.push(newInput);
}

HTML：

<lightning-accordion allow-multiple-secions-open onsectiontoggle={handleToggleSection}>
    <template if:true={stepList}>
        <template for:each={stepList} for:item={step}>
            <lightning-accordion-section key={step.Name} label={step.Name}>
                {step.Content}
            </lightning-accordion-section>
        </template>
    </template> 
</lightning-accordion>

就像我说的那样，如果执行以下操作，它会很好地工作：

@track stepNames = [];
@track stepContents = [];

addStep(){
    this.stepNames.push('testName');
    this.stepContents.push('testContent');
}

并且：

<lightning-accordion allow-multiple-secions-open onsectiontoggle={handleToggleSection}>
    <template if:true={stepNames}>
        <template for:each={stepNames} for:item={name}>
            <lightning-accordion-section key={name} label={name}>
                I don't want to do an additional for:each for Content.
            </lightning-accordion-section>
        </template>
    </template> 
</lightning-accordion>

解决方法

有人告诉我解决方法如下：

@track stepList = [];

addStep(){
    let step = { 'Name': 'testName','Content': 'testContent'};
    this.stepList.push(step);
}