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?

Answer 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..!!

Answer 2

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