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

Question

我无法获取带有“名称”和“内容”字段的跟踪 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>

Answer 1

我被告知修复如下：

@track stepList = [];

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