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

LWC is designed with a one way data binding approach. Initially this can feel frustrating, especially for people who have come to love the simplicity of two way .Lightning web components allow one way binding but aura support two way binding. One way binding follows from controller to view but vice versa is not possible.

One way binding means that the model is rendered in the view, but in order to update the model if the view changes, you must fire an event and handle that event to update the code in your controller.

One way binding example

Sample.html

<template>
   {firstname}
   <lightning-input type="text" label="name" value={firstname} onchange={handlechange}></lightning-input>
</template>

Sample.js

import { LightningElement, track, api } from 'lwc';
export default class Sample extends LightningElement {
   @api firstname="hello";
   handlechange(event){
  console.log(this.firstname);  // This will not change even we change the view text data.   
   }
}

To make this two way binding we use event

import { LightningElement, track, api } from 'lwc';
export default class Sample extends LightningElement {
   @api firstname="hello";
   handlechange(event){
Vaar targetval=event.target;
this.firstname=targetval.value; 
   }
}

Answer 3

/* 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);
}
}