1

I am new to Lightning Web Components. I created a LWC that will search for accounts and display the account name. Initially, I was not able to display data in html file because I was using {acc.name} instead of {acc.Name}. I was not able to debug and check value of this variable as it was in HTML file. In such cases, how can I debug HTML file and check value of variables? Is it even possible?

I tried to use <script> console.log(acc.name) </script> inside HTML file but it gives me the error Forbidden tag found in template: '<script>' tag is not allowed. I cannot use <script> outside of <template> tag as it gives me error Multiple roots found lwc.

Screenshot of component

HTML

<template>
    <lightning-card title="Account-list" icon-name="standard:account">
        <div class="slds-m-around_medium">
            <lightning-input  label="Find Account" value={searchKeyAcc} onchange={handleChangeAcc} class="slds-m-bottom_small">
            </lightning-input>
            <template for:each={accounts} for:item="acc">                   
                <lightning-layout-item key={acc.id}>
                    <p>{acc.Name}</p></br><!--Error Here-->
                </lightning-layout-item>
            </template>
            <lightning-button label="Find Account" variant="Brand" onclick={findAccounts}></lightning-button>
        </div>
    </lightning-card>
</template>

JavaScript

import { LightningElement, track } from 'lwc';
import getAccList from '@salesforce/apex/AccountController1.getAccountList';


export default class AccountSearch extends LightningElement {
    @track searchKeyAcc;
    @track accounts;
    @track errorAccount;

    handleChangeAcc(event){
        
        this.searchKeyAcc = event.target.value;
    }
    findAccounts(){
        getAccList({
            name:this.searchKeyAcc
        }).then(result=>{
            this.accounts=result;
        })
        .catch(error=>{
            this.errorAccount=error;
        })
    }
}

2 Answers 2

3

HTML and Javascript are cAsE sEnSiTivE.

The only way to debug is through javascript (you cannot really do anything in HTML).

    getAccList({
        name: this.searchKeyAcc
    }).then(result => {
        this.accounts = result;
        console.log('accounts => ', JSON.stringify(this.accounts));
    })
        .catch(error => {
            this.errorAccount = error;
        })

Here you will get the exact data structure (array []) and the API names. And you need to use the exact API names in HTML also to render correctly.

Even for any other use cases you need to put debuggers and console statements in strategic lines to understand what is being passed to HTML.

1

If you check your browsers devtools, all your components will be available in ../modules/c. There you can add breakpoints and debug as you normally would. Turn on debug mode for your user to see the unminified versions of your code.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .