I want to show contacts of an account - salesforce

Question

I want to show contacts of an account, for that I have created LWC, I am calling Apex method here and I want to show all contacts of an account using data table, but data is not showing in the UI.
I am using custom label to pass account to Apex class.
please help me to achieve this
below is my code
JS Code:
const columns = [
{ label: "Name", fieldName: "Name" },
{ label: "Phone", fieldName: "Phone"},
{ label: "Email", fieldName: "Email"}
];
#track contactsList =[];
#wire(GetContacts,{AccountId:this.AccountId})
WireContactRecords({error, data}){
console.log('Entering WireContactRecords');
console.log('Entering WireContactRecords===='+this.AccountId);
if(data){
console.log('data*********+'+JSON.stringify(data))
this.contactsList = data;
this.error = undefined;
}else{
this.error = error;
this.contactsList = undefined;
}
}
Apex class
#AuraEnabled(cacheable = true)
public static Contact GetContacts(String AccountId){
String query = 'SELECT Name,Phone,Email FROM Contact WHERE AccountId =: AccountId';
return Database.query( query );
}
HTML CODE
<lightning-datatable
data={contactsList}
columns={columns}
key-field="id"
hide-checkbox-column>
</lightning-datatable>

Answer 1

The syntax to pass the value of a property defined in the JS class to a wired function is: #wire(functionName, { param: '$propertyName' })
Therefore, assuming that your class has an AccountId property, you have to change
#wire(GetContacts,{AccountId:this.AccountId})
to
#wire(GetContacts,{AccountId: '$AccountId'})
Moreover in the HTML you can use only property defined in your JS class, so if columns is defined only outside it, you should provide a getter:
get columns() {
return columns;
}