what i am trying to achieve is, when i edit an account to active = 'Yes'. My LWC component show refresh dynamically and show that active account when i click show active accounts button, but its not showing unless i refresh the whole page. How to refresh just my LWC component?? Used refreshApex but not working
Parent.html
<template> <lightning-card title="Accounts" icon-name="custom:custom42"> <lightning-button variant="brand" label={clickedButtonLabel} title="show Active" onclick={handleActiveClick} class="slds-m-left_x-small"> </lightning-button> <lightning-button variant="brand" label={clickedButtonLabel1} title="Show Inactive" onclick={handleInactiveClick} class="slds-m-left_x-small"> </lightning-button> </lightning-card> <div class="space"></div> <!-- include Parent to child and child to parent communication--> <template if:true={boolVisible}> <lightning-card title="Active Accounts" icon-name="standard:action_list_component"> <c-child-account-active-or-inactive onviewcaseclicked={handleCaseView} child-active-account={activeAccount} > </c-child-account-active-or-inactive> </lightning-card> </template> <!-- include Parent to child and child to parent communication--> <template if:true={boolVisible1}> <lightning-card title="Inactive Accounts" icon-name="standard:action_list_component"> <c-child-account-active-or-inactive onviewcaseclicked={handleCaseView} child-inactive-account={inactiveAccount} > </c-child-account-active-or-inactive> </lightning-card> </template> Parent JS
import { LightningElement, wire, track, api } from 'lwc'; import getAccounts from '@salesforce/apex/AccountManipulation.getAccounts'; import getAccountCase from '@salesforce/apex/AccountManipulation.getAccountCase'; import { refreshApex } from '@salesforce/apex'; const column = [ { label: 'Case Number', fieldName: 'CaseNumber', type: 'text', sortable: true }, { label: 'Case Status', fieldName: 'Status', type: 'text', sortable: true }, ]; export default class ParentAccountActiveOrInactive extends LightningElement { @track columns=column; activeAccount; inactiveAccount; @track clickedButtonLabel = 'Show Active'; @track clickedButtonLabel1 = 'Show Inactive'; @track boolVisible=false; @track boolVisible1=false; @wire(getAccounts) accDetails({error, data}){ if(data){ console.log('Data =',data); this.activeAccount = data.filter(i=> i.Active__c == 'Yes'); this.inactiveAccount = data.filter(i=> i.Active__c == 'No'); console.log("active accounts:",this.activeAccount); console.log("inactive accounts:",this.inactiveAccount); } if(error){ this.error = error; this.activeAccount = undefined; this.inactiveAccount = undefined; } } handleActiveClick(event){ const label = event.target.label; console.log('Label :',label); if(label === 'Show Active'){ this.clickedButtonLabel = 'Hide Active'; this.boolVisible = true; refreshApex(this.activeAccount);////Not working when edited a record to active } else if(label === 'Hide Active'){ this.clickedButtonLabel = 'Show Active'; this.boolVisible = false; this.caseNumber = Null; } } handleInactiveClick(event){ const label = event.target.label; if(label === 'Show Inactive'){ this.clickedButtonLabel1 = 'Hide Inactive'; this.boolVisible1 = true; refreshApex(this.inactiveAccount); //Not working when edited a record to inactive } else if(label === 'Hide Inactive'){ this.clickedButtonLabel1 = 'Show Inactive'; this.boolVisible1 = false; this.caseNumber = null; } } } Child HTML
<template> <template if:true={childActiveAccount}> <div style="height: 300px;"> <lightning-datatable key-field="id" data={childActiveAccount} columns={columns} onrowaction={handlesClick} hide-checkbox-column="true" show-row-number-column="true"> </lightning-datatable> </div> </template> <template if:true={childInactiveAccount}> <div style="height: 300px;"> <lightning-datatable key-field="id" data={childInactiveAccount} columns={columns} onrowaction={handlesClick} hide-checkbox-column="true" show-row-number-column="true"> </lightning-datatable> </div> </template> </template> Child JS
import { LightningElement, api, track } from 'lwc'; import {NavigationMixin} from 'lightning/navigation'; const actions = [ { label: 'View Case', name: 'viewCase' }, { label: 'Edit', name: 'edit' }, { label: 'Delete', name: 'delete' } ]; const column = [ { label: 'Account Name', fieldName: 'Name', type : 'button', initialWidth: 250, typeAttributes:{label:{fieldName:'Name'},variant:'base'}}, { label: 'Active', fieldName: 'Active__c', type: 'text', sortable: true }, { label: 'More', type: 'action', typeAttributes: { rowActions: actions }, }, { label:'' }, ]; export default class ChildAccountActiveOrInactive extends NavigationMixin(LightningElement) { @track columns = column; @api childActiveAccount; @api childInactiveAccount; 
