data Binding in lightning web component

Question

I am having two component databindingparent and databindingchild. I have input text in child when I enter value I am getting the value and on click of button firing event passing to parent and showing it.But on the onclick I am getting all the value as undefined.Either i need to handle on change of the lightning-input and store it and handle the on click of button and fire the event?.

/*Parent*/<template>
Hello! {name}
<c-databindingchild  onchangehandle={selectedname}></c-databindingchild>
</template>

/* eslint-disable no-console */
import { LightningElement,track,api } from 'lwc';
export default class DatabindingParent extends LightningElement {
@api recordId;
@track name;
selectedname(event) {
    console.log('eve---'+event.detail);
    this.name = event.detail;
}
}

/*child*/<template>
<lightning-input label="Name" value={name} name='nameValue'></lightning-input>
<lightning-button variant="base" label="Base" title="Event Button" onclick={handleClick} ></lightning-button>    

/* eslint-disable no-console */
import { LightningElement,api} from 'lwc';
export default class Databindingchild extends LightningElement {
@api nameValue;
@api name;
handleClick(event) {
    console.log('going here----'+this.nameValue);
    console.log('going here----'+this.template.name);
    console.log('going here----'+this.name);
    console.log('going here----'+event.target.name);
    console.log('going here----'+event.target.value);
    event.preventDefault();
    const selectedEvent = new CustomEvent('changehandle', { detail: this.nameValue});
    this.dispatchEvent(selectedEvent);
}
}

Answer 1

Unlike aura which has two way bindings, lightning web components only have one way data binding. You will have to attach an event handler for the lightning-input for value change as shown below and populate the variable .

From the documentation note the below

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

To communicate down from a parent component to a child component, set a property or call a method on the child component.

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

code for the child component is as below to make sure your properties are binded when input changes ,

 <template>
    <lightning-input label="Name" type="text" value={inputvalue} onchange={handleChange} name={inputboxname}></lightning-input>
    <lightning-button variant="base" label="Base" title="Event Button" onclick={handleClick}></lightning-button>
 </template>

The js code is below

import { LightningElement, api} from 'lwc';
export default class Databindingchild extends LightningElement {

  constructor() {
   super();
   this.inputboxname = 'Test Input';
  }

@api inputvalue;
@api inputboxname;

handleClick(event) {
    console.log('going here----'+this.inputvalue);
    console.log('going here----'+this.inputboxname);
    const selectedEvent = new CustomEvent('changehandle', { detail: this.inputvalue});
    this.dispatchEvent(selectedEvent);
 }

 handleChange(event) {
    this.inputvalue = event.target.value;
    this.inputboxname = event.target.name;
  }
 }

The console.log should return values .

Check for the sample in the playground .

Answer 2

/* eslint-disable no-console */

import { LightningElement,api} from 'lwc';
export default class Databindingchild extends LightningElement {
@api nameValue;
@api name;
handleClick(event) {
console.log('going here----'+this.nameValue);
console.log('going here----'+this.template.name);
console.log('going here----'+this.name);
console.log('going here----'+event.target.name);
console.log('going here----'+event.target.value);
event.preventDefault();
const selectedEvent = new CustomEvent('changehandle', { detail: this.nameValue});
this.dispatchEvent(selectedEvent);
}
}