Error in adding task ID

[DIGIHUAHK]

Why is the newly added task ID clearly gstcid-5, but it is displayed as gstcid-2 in the slot? How to solve this problem

[neuronetio]

Are you using onChange in the slot?

function itemSlot(vido, props) {
  function onClick() {
   // props.item will contain your item data
    alert(props.item.id + ' clicked!');
  }

  vido.onChange((changedProps) => {
    // if current element is reused to display other item data just update your data so when you click you will display right alert
    props = changedProps; // <- this is crucial
  });

  const style = `width:100%;`;

  return (content) => vido.html`<div class="my-item-slot" style=${style} @click=${onClick}>${content}</div>`;
}

[DIGIHUAHK]

Thank you for your enthusiastic help. I have been using onChange. Am I using it incorrectly?

[neuronetio]

show me code for myItemSlot

[DIGIHUAHK]

[neuronetio]

Maybe it's something to do with ref(props.item.id)?
I don't know how ref works internally but maybe it doesn't update this value in a timely manner.
Try removing the ref and specifying the id directly and see what happens.

[neuronetio]

Or if you really need a ref, put it in onChange

let itemSelectId;
onChange((changedProps)=>{
  props = changedProps;
  itemSelectId = ref(props.item.id);
});

[DIGIHUAHK]

Thank you, I'll give it a try

[neuronetio]

What do you use this ref for? To display the template, simply enter props.item.id directly in the template. Do you still use this ref somewhere? probably not since it is closed inside a function.
I think this ref is completely unnecessary.

return vido.html`<div id=${props.item.id}   ... >`;

[DIGIHUAHK]

I used it to mark the selected task bar by right clicking, and now I have found gstc.api.plugins Selection. getSelected() ['chart timeline items row items'] can also check the selected task bar, so the previous ID is not needed. But it's really strange that the PROPS points incorrectly

[neuronetio]

Aha, and myItemSlot will be used for all items - not only for those you are adding so in the props - you will have multiple items (when you scroll the content for example);

onChange((changedProps)=>{
  props = changedProps;
  console.log(props.item.id); // it will print gstcid-1 gstcid-2 ... gstcid-158 while you scroll vertically
});

Instead of creating a new (component) or slot - which is unfavorable in terms of performance - we use existing slots to render other items. Then we don't have to delete the html element and add a new one (time-consuming), we just replace the data and use the same html element (either slot or component).
In the new version v4 it will be solved differently, but for now it must remain as it is.

[neuronetio]

This is why you have gstcid-2 inside props.

[neuronetio]

One slot is for all items - onChange will give you actual one.

[DIGIHUAHK]

I understand. Thank you