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 .

-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);
}
}
  • 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.