Я перебираю список объектов и создаю новый входной компонент для каждой итерации. Когда я использую кнопку отмены, я хотел бы, чтобы то, что я ввел на входе, вернулось к значению по умолчанию. Хотя в моем JS-файле все выглядит нормально, пользовательский интерфейс не обновляет ввод, а вместо этого продолжает отображать все, что я набрал. Возможно ли, чтобы моя кнопка отмены вернула значения в молниеносных входах?

Html:

<template>
    <template for:each={inputs} for:item="inp">
        <lightning-input key={inp.key} type="text" value={inp.value}></lightning-input>
    </template>
    <lightning-button label="Cancel" onclick={cancel} ></lightning-button>
</template>

Js:

import { LightningElement, track } from 'lwc';
export default class Iteration extends LightningElement {
    @track inputs = [];
    connectedCallback(){
        var input1 = {};
        input1['key'] = 'fname';
        input1['value'] = 'firstName';
        this.inputs.push(input1);
    }

    cancel(){        
        var input1 = {};
        input1.key = 'fname';
        input1.value = 'firstName';

        //trying to recreate the input list from scratch
        this.inputs = [];
        this.inputs = [...this.inputs,input1];

        //everything looks ok in the javascript output, but the ui doesn't revert the value in the input field
        console.log('inputs: ' + JSON.stringify(this.inputs));
    }
}

Начальное значение:

when i first load the component

После ввода чего-либо и нажатия кнопки «Отмена»:

why won't this change back to the default?

1
Taylor Kingsbury 18 Май 2020 в 00:15
1
Вот игровая площадка с рабочим примером . Поскольку track имеет одностороннюю привязку данных, вам необходимо прикрепить событие изменения и изменить значение на основе ввода пользователя.
 – 
Raul
18 Май 2020 в 01:11
@ Рауль. Спасибо, это сработало.
 – 
Taylor Kingsbury
18 Май 2020 в 01:57
Немного более масштабируемый пример
 – 
Raul
19 Май 2020 в 10:33

1 ответ

Как указано в моем комментарии, в документе описано, что невозможно программно изменить значение после того, как оно было изменено пользователем вручную, хотя... вот загвоздка, если вы хотите сбросить его, вы можете сделать это до тех пор, пока вы сначала позволяете ему быть «пустым».

Просто выполните задание асинхронно с setTimeout

setTimeout(()=>{
   this.inputs = [...this.inputs,input1];
},0);
0
Sergio Alcocer 18 Май 2020 в 01:09