How to get property from lightning web component based on button clicked

Question

I have a dynamic lwc that generates related lists dynamically. I want to add a New button to the component but want to be able to dynamically get the component from which the new button was clicked so I can get the current object as a property. How do I achieve this or is this not possible in this manner or another way?

Something like:

createNew() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: event.button.cmp.obj,
                actionName: 'new'
            }
        });
    }

Thanks in advance.

Answer 1

Consider using dataset to dynamically get the custom attribute of components in iteration.

HTML

<template>
    <template for:each={OBJECTS} for:item="obj">
       <lightning-button key={obj} variant="brand" label="New" title="New" onclick={createNew} data-object={obj}></lightning-button>
    </template>
</template>

JS

import { LightningElement} from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

const OBJECTS = ['Account', 'Contact', 'Lead'];

export default class Navtab extends NavigationMixin(LightningElement) {
    createNew(event) {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: event.target.dataset.object,
                actionName: 'new'
            }
        });
    }
}