[LiveComponent] Dynamic DATA-MODEL binding?

[woweya]

I’ve often had recurring issues with this framework, meaning: Imagine I want to capture the status selected by a user when clicking a radio button inside a for loop. The radio buttons have these corresponding statuses:

Confirm
Cancel

So imagine something like:

<div {{ attributes }}>
        {% for person in persons %}
            {% set i = loop.index0 %}
            <fieldset style="margin-bottom: 1rem;">
                <legend>{{ person.name }} ({{ person.age }})</legend>

                <input type="radio" data-model="radio-button">

            </fieldset>
        {% endfor %}

</div>

The way the data-model currently works, if I click the first element of the for loop (“Confirm”), the value of all the remaining elements in the loop will also be set to “Confirm,” since the data-model uses a static and unique binding across all items in the loop.

My idea was to create a dynamic data-model, setting it for example like this: data-model="radio-button-[{{ id }}" That way, I could correctly map the data-model to a specific element and prevent all the remaining elements in the loop from inheriting the same result (“Confirm”).

     <input type="radio" data-model="radio-button-[{{ i }}]">

The issue is that, when trying to assign a dynamic id, in vendor->symfony->ux-live-component->assets->dist-live_controller.js, an error occurs: Invalid model name ... (line 1900)

And despite my investigation, I currently find it very difficult to come up with a working solution, and I’m not even sure if it’s actually possible to implement this feature at all…

What do you think?