LWC - Add value on href

Question

Is it possible to add a value on href? so I can do something like this:

html:

<a href value={obj.Id} onclick={openRecord}> </a>

js:

openRecord(event){
    this[NavigationMixin.Navigate]({
        type: "standard__recordPage",
        attributes: {
            recordId: event.target.value,
            objectApiName: 'Custom_Object__c',
            actionName: 'view'
        }
    });
}

I tried to console.log the event.target.value inside openRecord method but it doesn't show any. Is there any workaround for this?

Answer 1

You can store information on the anchor tag using a data attribute. You would also want to null out the href attribute. Like this:

<a onclick={openRecord} data-value={obj.Id} href="javascript:void(0)">

In the click handler you can extract the data and cancel the original event:

openRecord(event){
  event.preventDefault();
  let recordId = event.target.dataset.value;
  //call your navigate mixin as normal with the above id