Q:

Lightning-tile dynamic href

Folks,
I have a lightning-tile component on my opportunity that displays records from a custom object.   It accepts a 'href' value but i cannot find a way to link it to the data it's displaying.   The documentation shows a static url but i would like it to be dynamic meaning i want to open the record when a user clicks it.   Here what i have:
<template>
    <div class="slds-m-top_medium slds-m-bottom_x-large">
        <div class="c-container">
            <lightning-card  title="Suite Deal Summary" icon-name="standard:proposition">
                <lightning-layout multiple-rows="true">
                    <lightning-layout-item padding="around-large" size="12">
                        <template for:each={suiteDeals} for:item="suite">
                            <lightning-tile label={suite. Name} key={suite. Id} type="media" href="/suite_deal__c/how do i get an id here">
                                <lightning-icon slot="media" icon-name="standard:proposition"></lightning-icon>                                      
                                <ul class="slds-list_horizontal slds-has-dividers_right">
                                    <li class="slds-item">{suite. Deal_Number__c}</li>
                                    <li class="slds-item">{suite. Deal_Status__c}</li>
                                </ul>                         
                            </lightning-tile>                                                                                                       
                        </template>                                                             
                    </lightning-layout-item>                                    
                </lightning-layout>
            </lightning-card>                
        </div>    
    </div>
</template>

This is my JS file:
import { LightningElement, wire, track, api } from 'lwc';

import getSuiteDeals from '@salesforce/apex/SuiteCataloger.getSuiteDeals';

const FIELDS = [
    'Opportunity. Id',
];

export default class Suite_Deal_Summary extends LightningElement {

    @api objectApiName;
    @api recordId;
    @track currenObjectName;
    @track currenRecordId;
    @track suiteDeals;

    connectedCallback() {
        this.currenRecordId = this.recordId;
        this.currenObjectName = this.objectApiName;

        //console.log(this.currenRecordId);
        //console.log(this.currenObjectName);
        getSuiteDeals({ oppId: this.recordId} )
        .then(results => {  
            console.log('returning' + results); 
            console.log(JSON.parse(JSON.stringify(results)));
            this.suiteDeals = results;
        })
        .catch(error => { console.log('error'); });
    }

}

My apex that just returns my records:
@AuraEnabled (cacheable=true)
public static List<Suite_Deal__c> getSuiteDeals(Id oppId){
    return [SELECT Id, Name, Suite_Deal_Number__c, Suite_Deal_Status__c 
                FROM Suite_Deal__c WHERE Opportunity__c = :oppId ];              
}

I've tried to just put 'suite. Id' or '../suite. Id' but it's not behaving. 

A:

You just need to clone and copy the value you need. 
In your template:
href={suite.href}

And in your code:
this.suiteDeals = results.map(result => ({ href: `/${result. Id}`, ...result }));

Change /${result. Id} to whatever you need it to be for the correct URL. 
The ... here is meant to be literal, it copies all of the other attributes from the original object to the new one.