Dynamically generated $refs

[gaslit]

Hi been trying this on my own for sometime. Hope to get advice.

Basically i am using an x-for statement to dynamically generate an arbitrary number of checkboxes.

<template x-for="record in records">
  <div x-bind:class="{['bg-lightBlue-700', 'text-gray-50']: `$refs.a${record.record_id}.checked`}" class="flex flex-row border-b cursor-pointer md:items-center hover:bg-lightBlue-700 hover:text-gray-50">
    <div class="flex flex-row items-center w-24 h-8 px-2 py-2">
      <input x-ref="`a${record.record_id}`" type="checkbox" />
    </div>
  </div>
</template>

the x-for statement generates a div with a nested div containing a checkbox for each record. The checkbox will be named using a concat of the "a" prefix and the record_id.

My goal is to bind the classes attribute of the parent div (for each record attribute) so when the child checkbox is checked, it will apply the tailwind classes bg-lightBlue-700 and text-gray-50 on the parent div.

My big difficulties is trying to understand the syntax on how to nest TWO expressions $ref and ${record.record_id} and I am not even sure if that's possible. And also, is my approach right? I also need to have unique refs generated for each div as I intend to store the checkboxes that are ticked in a JSON array which will be then sent to the server.

Thank you very much for your kind help.

[KevinBatdorf]

I think maybe you want $refs[`a${record.record_id}`].checked?

If still not working can you make a codepen?

[cartbeforehorse]

@danddanddand
Thanks for the idea. I'm not currently in front of my project and I'm not entirely sure if it'll work in my scenario. But I can see where you're coming from. It's definitely something that I'll look into.

[SimoTod]

No worries, I'm sorry you got it in the wrong way. The documentation is open source and Caleb is always happy to accept PRs if you feel it should be improved (instructions in the readme).
dynamic x-ref was an hack in v2, the docs never suggested to use it but people noticed it worked and started writing tutorials.

I'm happy you fixed in a different way, I don't get paid nor I win anything if you say I helped and I'm not reading my message as hostile (at least no more then your first response) but it must be a language barrier (English is not my first language).

[cartbeforehorse]

Thanks. I didn't know the documentation was also open-source. I might have a look at doing a PR on them. This reply is very useful.

[Ronan-Lenor]

Hello,

So, if dynamic :x-ref don't work anymore in a x-for, what is its alternative?

this feature was great, i don't understand why it was removed in v3 :(

[SimoTod]

this feature was great, i don't understand why it was removed in v3

The reason why it doesn't work anymore is technical (btw, it was never suggested as a feature in v2 but it worked). Basically in v2, x-ref didn't do anything, it was just a normal attribute and all the logic was in $refs which was just a wrapper around querySelector so Alpine was always querying the dom on each refresh. Also in v2, whenever a property was changing, each directive was recalculated and updated.

In v3, x-ref saves a reference to the element onto an internal map and $refs just access that map (faster, it doesn't crawl the DOM anymore). If dynamic x-ref had been implemented, Alpine should have kept the key of that map entry up to date because the value can change. But in v3, a directive only refreshes if it contains a reactive property (for example a property from x-data) which means that x-ref would update the map but an hypothetical $refs pointing to the old value would become inconsistent.

Now for your use case it might be fine but other people would start raising bugs. Updating the directive containig $refs would require to hack the underlying vue reactivity layer because it would not work out of the box. It would also raise questions about what happen if a reference becomes invalid. Etc etc

Long story short, it's not as simple as it seems.

About the workarounds, a few options are:

1. use document.querySelector (or $root.querySelector to restrict it to the component)
2. create your own magic helper that implement solution 1 to make it less verbose
3. create a new directive which evaluates the value and creates dynamic references so you can then use $refs as expected but you need to take care of the challanges mentioned above.

[Ronan-Lenor]

Ah, the problem seem deeper that imagined ^^;
well, i have ended with something like x-init="$el.id = index" in my x-for="(value, index) in myArray" loop