2

I am using global variable @api filter in wire method in child component. Defined this variable with default value="". I am passing value say 'xyz' to this filter parameter from parent lwc component. When the child component is called sometimes the variable showing "" and sometimes showing "xyz". Why there is inconsistency and how to make this variable to have value what i assigning from Parent Component. Below is the code:

@api filter ="";
@wire(getContactList)
    wiredContacts({ error, data }) {
        if (data) {
            const filter = this.filter;
             console.log('filterval'-->filter);--->displaying "" instead of "xyz"
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.contacts = undefined;
        }
    }
3

The wire method is going to cache the result based on the input parameters. As such, if you want the wire method to always return the correct result, you need to use a reactive parameter:

@api filter ="";
@wire(getContactList, { filter: '$filter' })

Otherwise, you might want to use a backing variable so you can detect changes:

_filter;
@api set filter(value) {
  this._filter = value;
}
get filter() {
  return this._filter;
}
0

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.