Dynamically add data-* attribute to an item inside an array

Question

I am creating an array of pills and would like to add a data-* attribute to each item. But unfortunately I get a syntax error.

I tried changing the field name 'data-id' to 'dataId' but still wasn't able to query the field using event.target.dataset.dataId.

What is the right syntax for this?

Playground

import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {

    @track items = [

    ];
    handleClick(event){
        let obj ={
            label: 'test', 
            data-Id: 'my data id' <---- This is where I get syntax error
        }           
        this.items.splice(this.items.length,0,obj)  //adding new items to array
    }  
    copyPillToForm(event){
        console.dir(event.target.dataset.data-Id)

    }
}

Answer 1

When using iteration you nee to set up the Key for the iterator

Then the usage of data attribute is as follows

Assume you are using data-id the you are accessing that attribute in js code

event.target.dataset.id

if the data attribute is like data-key then you will access it by event.target.dataset.key

Similarly I have update the code in the playground.

html file:

<template>
<lightning-button style="" label="Add" title="Non-primary action" onclick={handleClick} class="testclass"></lightning-button>
<template for:each={items} for:item="item" for:index="index">
    <lightning-pill label={item.label} key={item.key} data-id={item.dataid} data-index={index} onremove={handleRemoveOnly}></lightning-pill>
</template>

Js file :

import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {

  count = 0;
  @track items = [
  ];
  handleClick(event){
    let obj ={
        key: this.count++,
        label: 'test',
        dataid:'id' + this.count
    };           
    this.items.splice(this.items.length,0,obj)  //adding new items to array
  }  
  handleRemoveOnly (event){
    console.dir(event.target.dataset.id)
  }
}