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