Блог

У меня возникли проблемы с получением значений отслеживаемого списка JS с полями «Name» и «Content». Если я создаю отдельные списки для каждого поля, это работает нормально. Но я не хочу использовать несколько для: each в моем HTML. Когда я пробую первый метод, он не захватывает шаг.Имя, которое хранится в списке. Однако при втором методе это происходит.

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);
}