0

I want to get the value of each tile href value using a function getHref is there a way wherein I can pass the index value to my js as part of getHref parameter.

<template  for:each={lstRecentlyViewed} for:item="obj" for:index="index">

<li class="slds-item" key={obj.Id}>
    <lightning-tile label={obj.Name} **href={gethref}**>
        <dl class="slds-dl_horizontal">
            <dt class="slds-dl_horizontal__label">
                <p class="slds-truncate" title="Company">Name:</p>
            </dt>
            <dd class="slds-dl_horizontal__detail slds-tile__meta">
                <p class="slds-truncate" title="Salesforce">obj.Name</p>
            </dd>
            <dt class="slds-dl_horizontal__label">
                <p class="slds-truncate" title="Email">Type:</p>
            </dt>
            <dd class="slds-dl_horizontal__detail slds-tile__meta">
                <p class="slds-truncate" title="salesforce-ux@salesforce.com">
                    {obj.Type}</p>
            </dd>
        </dl>
    </lightning-tile>
</li>
2
  • What are you trying to accomplish with getHref? There may be an easier way to do this. Can you share the JavaScript code? – stackasaur Oct 26 '20 at 14:29
  • My actual use case is different, I know we can solve this use case by creating a list object and create a back tic expression to resolve this. But I want to understand if this is possible? – Sam77 Oct 26 '20 at 15:45
0

Getters don't support arguments. As it seems you would want to use the index to the hyperlink. So, the easier approach would be to simply change the Object being iterated as you need it to be.

You can simply change it to,

@track lstRecentlyViewed = [
    { url : 'https://someurl.com/1', Name: 'something', Id: 1 , Type : ''},
    { url : 'https://someurl.com/2', Name: 'something again', Id: 2 , Type : ''},
    { url : 'https://someurl.com/3', Name: 'something again', Id: 3 , Type : ''}
    ];
<template for:each={lstRecentlyViewed} for:item="obj" for:index="index">
   <li class="slds-item" key={obj.Id}>
        <lightning-tile label={obj.Name} href={obj.url}>
            <dl class="slds-dl_horizontal">
                <dt class="slds-dl_horizontal__label">
                    <p class="slds-truncate" title="Company">Name:</p>
                </dt>
                <dd class="slds-dl_horizontal__detail slds-tile__meta">
                    <p class="slds-truncate" title="Salesforce">{obj.Name}</p>
                </dd>
                <dt class="slds-dl_horizontal__label">
                    <p class="slds-truncate" title="Email">Type:</p>
                </dt>
                <dd class="slds-dl_horizontal__detail slds-tile__meta">
                    <p class="slds-truncate" title="salesforce-ux@salesforce.com">
                        {obj.Type}</p>
                </dd>
            </dl>
        </lightning-tile>
    </li>
</template>

Or if you want to perform any action on click or something. You'd better give the index value to the attribute. And get it on the click.

<lightning-tile data-index= {index} onclick={handleClick}>
</lightning-tile>

handleClick(evt){
console.log(evt.target.dataset.index);
}

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.