4

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

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 .

| improve this answer | |
0

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; 
   }
}
| improve this answer | |
  • Welcome to SFSE! This site isn't meant to be a place to promote your own site (your user profile is the place set aside for that), so I've removed that part of your answer. This answer is also very similar in substance to the existing, accepted answer (which has been in place for a bit over a year at this point). Similar answers can be ok, but personally, I like to see something to distinguish between answers (a different approach, more/updated information, etc...) – Derek F May 18 at 12:54
-4

/* 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);
}
}
| improve this answer | |
  • 1
    Welcome to SFSE! Please take the tour and read How to Answer. Right now, this answer is what we call a code dump. Code dumps tend to be poor answers because they don't help people understand what the problem is, or how to avoid similar problems in the future. They also tend to generate a lot of back-and-forth in the comments like "that didn't work" and "try this instead" which makes it hard for other people with similar problems to follow. This answer would be improved if you went over what the problem is, why it's a problem, how to fix it, and why the fix works. – Derek F Jul 29 '19 at 11:40
  • @ShivPatil Derek didn't delete any comments. I deleted them as a moderator. Neither Derek nor anyone else is expected to respond, especially since you did not improve your post in the way that was suggested. Your comments need to remain civil. Do not make threats. – David Reed Jul 31 '19 at 12:32
  • @DavidReed If you are moderator then tell me how can he directly mark this answer as not useful as he knows its my first answer. He should first suggest me to format answer and if i did't make it then he can mark it as not useful. This is how you welcome new people on SFSE. You guys are just increasing your reputation. – Shiv Patil Jul 31 '19 at 13:07
  • @ShivPatil Please take some time to explore our Help center, take the Tour, and read How to Answer. You seem to be misunderstanding some aspects of how this site works. Your answer was downvoted by four separate community members. You have been clearly told why it does not fit our format and what you can do to improve it. Nobody gains reputation from comments - they are an attempt to help you, to which you seem quite hostile. – David Reed Jul 31 '19 at 13:18
  • This thread is getting off topic, so I'm not going to continue here. Again, please explore the site's help resources, and ask on Meta if you have questions about how the site works. – David Reed Jul 31 '19 at 13:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.