0

sorry for my bad english. I have two lwc components, parent and child. Child components have two @api properties passed from parent. I want to call apex method when component is inserted into dom and, after this, when one of two properties change value from parent. On Aura component there was a change handler on attribute that re-call the apex method. How to achieve this on lightning web component?

Thanks for you reply

Edit: Parent.html

<template>
   <lightning-input onchange={handleParam1}></lightning-input>
   <lightning-input onchange={handleParam2}></lightning-input>
   <c-child param1={param1} param2={param2}></c-child>
</template>

Parent.js

value;
valueProcess;

handleChange(event) {
    this.value = event.detail.value;
}

handleChangeProcess(event) {
    this.valueProcess = event.detail.value;
}

}

Child.html

<template>
 <lightning-combobox
  name="completion"
  label="Mode"
  value={value}
  options={options}
  onchange={changeMode}>
 </lightning-combobox>
</template>

Child.js

@api param1;
@api param2;
options=[];

connectedCallback() {
  //call apex method
  init({param1:this.param1, param2:this.param2}).then(result => {
    this.options = result.options;
  }).catch(error => {

  });
}
2
  • Hi and welcome to SFSE. It would be good if you could explain a bit more as to what you are trying to achieve, to see if you are taking the right approach in the first place. Please read how to ask then edit your question to add more detail. The SFSE community expect you to explain the specifics of the problem you face and for you to demonstrate what you have tried in order to resolve the problem. Providing code snippets frequently means you get good answers more quickly. – Phil W Jun 10 '20 at 10:55
  • Thanks @PhilW , i edited my question. After init lwc, if i change param values how to call apex method? thanks – fraoud Jun 10 '20 at 11:52
0

To execute logic each time a public property is set, write a custom setter.

If you write a setter for a public property, you must also write a getter. Annotate either the getter or the setter with @api, but not both. It’s a best practice to annotate the getter.

Check below example, expose your public property as getter and use a setter to execute the logic you want. uppercaseItemName is a private property which holds the value passed by parent and set by the setter.

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

    @api
    get itemName() {
        return this.uppercaseItemName;
    }

    set itemName(value) {
       this.uppercaseItemName = value.toUpperCase();
       //call your apexmethod here
    }

}

and pass the value from a parent like this:-

<c-child item-name={fieldValue}></c-child>

Check the full example here:-

  1. VALUE CHANGE HANDLER IN LIGHTNING WEB COMPONENT WHEN PARENT PASSES VALUE TO CHILD
  2. Use Getters and Setters to Modify Data

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.