How to get Input/Output variable in LWC component in Flow

Question

I have a flow with a Lightning Web Component. The LWC takes a list or Records as a variable for input and output. The LWC renders a lightning-datatable in which the user may edit various fields of the records, and remove/add records.

I expect the record list variable to be modified after leaving the LWC screen. It IS modified if I create a new record, but the original record cannot be modified.

I have read on docs that the @api annotation makes the variable read-only by wrapping it in a proxy. Then, how can I edit the records?

Answer 1

This is demonstrated in lightning-flow-support. To make a variable you can directly modify, use an internally backed variable with getters and setters:

@track _todos = [];

@api // Note: specify only the getter or setter as @api, not both.
get todos() {
    return this._todos;
}

set todos(todos = []) {
    this._todos = [...todos];
}

To notify the Flow Runtime that a value has changed, use the FlowAttributeChangeEvent:

const attributeChangeEvent = new FlowAttributeChangeEvent('todos', this._todos);
this.dispatchEvent(attributeChangeEvent);

You must do this in order for the value to be updated outside the LWC.