[SalesForce] How to create a link to the record page using lwc

I am using LWC and would like to create a link to record's detail page when using the <lightning-tile> element.

Question:

How can I do this using the href attribute?

I have tried the following, but it fails to print a <a href="/someid"> correctly.

Code:

myApp.html

<template>
   <!-- other code -->
    <template for:each={myAccounts} for:item="account">
            <div key={account.id} class="slds-col">
               <lightning-tile
                      label={account.Name}
                      href="/"+{account.Id}>
                    <p>here i go</p>
               </lightning-tile>
            </div>
        </template>
</template>

myApp.js

import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {
    @track
    myAccounts = [
        {
            "Id": "1",
            "Name": "Abc Inc.",
        },
        {
            "Id": "2",
            "Name": "Def Inc.",
        },
        {
            "Id": "3",
            "Name": "XYZ Inc.",
        },
        {
            "Id": "4",
            "Name": "WX Inc.",
        },
    ];
}

Best Answer

It looks like you are attempting to do an expression evaluation in the markup, which I don't think is supported in LWC at this time. You will likely need to do something like

myApp.js

import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {
@track
myAccounts = [
    {
        "Id": "1",
        "Name": "Abc Inc.",
    },
    {
        "Id": "2",
        "Name": "Def Inc.",
    },
    {
        "Id": "3",
        "Name": "XYZ Inc.",
    },
    {
        "Id": "4",
        "Name": "WX Inc.",
    },
];

    myAccounts.forEach(function(item){
        item.Url = '/' + item.Id;
    }
    );
}

myApp.html

<template>
    <!-- other code -->
    <template for:each={myAccounts} for:item="account">
        <div key={account.id} class="slds-col">
           <lightning-tile
                  label={account.Name}
                  href={account.Url}>
                <p>here i go</p>
           </lightning-tile>
        </div>
    </template>
</template>

But It would probably be better to use the NavigationMixin from lightning/navigation to build the record url instead of just doing /<accountId>

Related Topic