1

I am iterating over a list of objects, and creating a new input component for each iteration. When I use the cancel button, I would like what I typed in the input to revert back to a default value. While everything looks ok in my JS file, the UI is not refreshing the input, and instead keeps displaying whatever I typed. Is it possible for my cancel button to revert the values in the lightning-inputs?

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

starting value:

when i first load the component

after typing in something and then hitting cancel:

why won't this change back to the default?

3
  • 1
    Here is the playground containing a working example. As track has one way data binding, so you need to attach on change event and change the value based on user input..
    – Raul
    May 17 '20 at 22:11
  • @Raul. Thank you, this worked. May 17 '20 at 22:57
  • A bit more scalable example
    – Raul
    May 19 '20 at 7:33
0

As posted in my comment, it is described in the doc that its not possible to programatically change the value once it has been manually altered by the user, although... here is the catch, if you want to reset it, you could do it as long as you allow it to be "empty" first.

just do the assignment asynchronously with a setTimeout

setTimeout(()=>{
   this.inputs = [...this.inputs,input1];
},0);

Not the answer you're looking for? Browse other questions tagged or ask your own question.