Dispatch custom event to <template> clone element

[NilsWeinander-KulturIT]

I have elements (input fields wrapped in a div structure) which can be duplicated dynamically. I do this using a <template> element and template.content.cloneNode(true) in a function in an Alpine store. This works just fine, the cloned component displays correctly and has the x-data defined in the template content. But, in some cases I need to modify the data. Since I haven't found a way to access the component's data from the function in gthe store, I thought I'd just send a custom event to it instead:

const editField = template.content.cloneNode(true);
target.appendChild(editField);
const appendedField = getLastNonTextNode(target);
appendedField.dispatchEvent(new CustomEvent("clear-added-field"));

and

x-on:clear-added-field="uuid = null; value = ''; originalValue = '';"

But the component never receives the event. I have tried sending the event to the parent element (with an x-on on the parent ), target in the code above. That works, the parent component gets the event. What do I need to do in order to successfully dispatch an event to the cloned component? Alternatively, is there a way to access the x-data of the component directly from the function in the store?

[SimoTod]

You are dispatching the event too early, you need to allow Alpine to initialise the component, javascript is a single-threaded language and can only do one thing at the time. Use nextTick to queue the event after the component has been created.
You can access data directly by using Alpine.$data as well (again, you need to wait one tick).
See https://codepen.io/SimoTod/pen/abewqgz

[NilsWeinander-KulturIT]

Thanks! That's the trick!

[ekwoka]

Is there a reason you're not using x-for?

[NilsWeinander-KulturIT]

The clones are created on demand, on a click event, not from an existing list.

[ekwoka]

Could you not simply add data to the list on demand?

[NilsWeinander-KulturIT]

That is clever, never occurred to me that x-for is reactive! If I can pull this off, the code will be simpler than what I have now. Thanks!