How to avoid errors from onchange methods on lightning-input?

Question

I'm trying to learn the basics of Lightning Web Components and I'm having trouble getting the value of a lighting-input element.

I understand that it's designed for one way data binding instead of two way (a decision that I find questionable), but I can't get an onchange method to work either. I'm running this sample on the Lighting playground:

//app.html

<lightning-input
    label="test"
    onchange={handleChange}>
</lightning-input>

//app.js

import { LightningElement, track, api } from 'lwc';
export default class App extends LightningElement {
    handleChange(event) {
        console.log(event)
    }
}

And making any change to the input in the template gives me the following error:

Error: Disallowed method "appendChild" in ShadowRoot.

Why does the onchange method not work as expected and should I go about making it work as intended?

Mohit K · Accepted Answer · 2019-12-03 13:44:07Z

1

console.log() works in playground.

You have to write this way - console.log(event.target.value)

Replace it in your code & it will print values..!!

answered Dec 3, 2019 at 13:44

Mohit K

2472 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt Gween · Accepted Answer · 2019-11-25 18:49:19Z

0

Turns out the problem was with using console.log(). Seems that it has some issues working in the Playground.

answered Nov 25, 2019 at 18:49

Matt Gween

1772 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to avoid errors from onchange methods on lightning-input?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related