Track Input value in LWC

Question

What

I'm trying to bind a controller variable with lightning-input's value. For instance myVar

So far

Following all examples and documentation of LWC I'm able to do so by using the onchange method and value attribute in this way.

lwc.html

<lightning-input type="number" name="input1" value={myVar} onchange={input1OnChange}></lightning-input> 

lwc.js

//... declaration lines
//...

@track myVar = 0;

input1OnChange(event){
   this.myVar = event.target.value;
}

This works fine in both directions of changes (From the input element or from the js controller). But it is tedious when you have several inputs.

What I was expecting

I was expecting that a @track notation on some controller variable gets updated the value automatically from the input element when it changes.

<lightning-input type="number" name="input1" value={myVal}></lightning-input> 

Question

Why is not LWC framework handling input element > controller variable change automatically? In other words, why binding is not bidirectional? I don't think performance is the answer because the listener is the most costly part and is already implemented.

Update

Based on the feedback received here I found a more generic way to deal with a large number of bindings using this approach:

lwc.html

 <lightning-input name="input1" onchange={genericOnChange} value={input1}></lightning-input> 
    <lightning-input name="input2" onchange={genericOnChange} value={input2}></lightning-input> 

lwc.js

    @track input1 = 0;
    @track input2 = 0;

    genericOnChange(event){
        this[event.target.name] = event.target.value;
    }

Answer 1

You can use a single handler to capture the values in all of your inputs.

Here is my favorite approach that has 0 maintenance once you put it in, all you need to know is what "Field" and what "Value" and you can pump an object full of this information, just like a map with key and value.

Uncommented Solution:

@track theRecord = {};

handleFormInputChange(event){
    this.theRecord[event.target.name] = event.target.value;
}

<lightning-input type="time" name="FirstName" label="First Name"
                                        onchange={handleFormInputChange}
                                        class="formInput"></lightning-input>

This uses an object and bracket notation to assign the data to the correct object property.

I've used this many times to keep changes easy, adding fields to HTML and logic to JS without having to touch the handler.

Commented Solution:

// define your object, it'll look just like an sobject in the end
@track theRecord = {};

handleFormInputChange(event){
    // In 1 line, assign the value to the property
    this.theRecord[event.target.name] = event.target.value;
    console.log(event.target.name + ' now is set to ' + event.target.value);
}


// example: 
      // event.target.name == 'FirstName'
      // event.target.value == 'Mike'
      
      // End result: 
        // this.theRecord.FirstName = 'Mike';
        // Dynamically created a new property for theRecord... it'll look like this:
        // this.theRecord = {FirstName: 'Mike'};

    // see the full structure of our object as it grows
    // console.log('theRecord: ' + JSON.stringify(this.theRecord, null, '\t'));


html: 

<div>See output like {theRecord.FirstName} {theRecord.MiddleName} {theRecord.LastName}</div>

<lightning-input type="time" name="FirstName" label="First Name"
                                        onchange={handleFormInputChange}
                                        class="formInput"></lightning-input>

<lightning-input type="time" name="MiddleName" label="Middle Name"
                                        onchange={handleFormInputChange}
                                        class="formInput"></lightning-input>

<lightning-input type="time" name="LastName" label="Last Name"
                                        onchange={handleFormInputChange}
                                        class="formInput"></lightning-input>

Answer 2

It is not there but you can avoid by defining 20 handlers.

Don't use multiple event handlers. Just create on the handler and call it on all 20 inputs. I am using this way:

    handleFormInputChange(event){
    if( event.target.name == 'tag_name_0' ){
        <Your Var> = event.target.value;
    }
    else if( event.target.name == 'tag_name_1' ){
        <Your Var> = event.target.value;
    }
    else if( event.target.name == 'tag_name_2' ){
        <Your Var>= event.target.checked;
    }
    else if( event.target.name == 'tag_name_3' ){
        <Your Var> = event.target.value;
    }
}

<lightning-input type="time" name="tag_name_0" label="Label 1"
                                        onchange={handleFormInputChange}
                                        class="formInput"></lightning-input>

<lightning-input type="time" name="tag_name_1" label="Label 2"
                                        onchange={handleFormInputChange}
                                        class="formInput"></lightning-input>

<lightning-input type="time" name="tag_name_2" label="Label 3"
                                        onchange={handleFormInputChange}
                                        class="formInput"></lightning-input>

<lightning-input type="time" name="tag_name_3" label="Label 4"
                                        onchange={handleFormInputChange}
                                        class="formInput"></lightning-input>

Answer 3

In other words, why binding is not bidirectional?

LWC is designed with one way data bind in mind, therefore, it's now a required action on your part to retrieve anything (even out of a base component). Emphasis mine:

The data binding between components for property values is one-way.

To communicate up from a child component to a parent component, send an event.

Which is exactly what salesforce is doing, they are allowing access to a standard event which carries the payload of the value (event.target.value) for you to manually deal with.

Answer 4

I think the best convention for LWC is not to track the input at all.

When you need to get the value, retrieve it by locating the input component using this.template.querySelector, instead of having to have a property on the parent tracking it.

The reason being is because LWC has only one way binding, instead of -in effect- implementing your own 2 way binding using the onchange event, look at the public properties of the child components (value in this case) as properties on the parent as well.

For example, add data-id as an attribute like so

<lightning-input type="number" name="input1" value={myVar} data-id="input1"></lightning-input> 

and retrieve the input value like this

let val = this.template.querySelector('input[data-id=input1]').value;