Alpine: A custom attribute for x-for to detect that it finished rendering

[ahmadabuaysheh]

I am building a page in an admin section and it is a long table of stores. I used AJAX to edit and add data on the same page, no reloading. I started to add some CSS animations with classes, I figured out how to add a class to a row after I edit it but my problem was when I added a new row to the table. It was easy to add by pushing data to the list of objects but couldn't get the row DOM itself so I can add the animation class to it.
The add form is on a modal with a button.

Some further explanation: When a user clicks on edit for any row I pass the $ref.id of the row to a variable in the x-data (I managed to do that dynamically). Then when the user clicks the edit data button it will get the object and add a class to it.

I tried now to have a solution for a new row but couldn't do that at all. I tried to call a new event but also that didn't happen

This code is for demostartion of my situation only:

<div x-data="gatherData">
<tamplate x-for"item in items" :key="item.id">
<tr> <td>item.id></td> <td>item.name</td> <td><button @click="editThisRow"></td></tr>
</template>
<button @click="addNewRow"></button>

addNewRow: would fetch data from an api and push the new item to items

[ryangjchandler]

Sorry, I'm not sure I understand your problem or question. It would be great to have a copy and pastable Alpine component that demonstrates your problem, or a CodePen / Sandbox.

[ahmadabuaysheh]

Yes of course, here is my exact situation in codepen -I wrote to demonstrate my issue here-:

https://codepen.io/ahmadabuaysheh/pen/ExVYQJj

I couldn't find a way to detect this new row so I can attach a class to it. Apparently I can't do that after pushing to array because there is a time to when to dom finishes to render. I used for example document.getElementById but returns null for me.

[ryangjchandler]

Okay, I understand your frustration now. There isn't currently any events getting fired my Alpine when a component has finished rendering, but there have been talks between me and a few others about adding those events in.

I've got a PR open at the moment that adds a few initial events and could be extended if it's wanted in the framework by Caleb. For now, you could look into Alpine's own transition utilities and class bindings. I've forked your pen with an example here https://codepen.io/ryangjchandler/pen/WNQezVv.

I'll explain the changes. When pushing the new item to the array, add a unique value that indicates that it has been added after the initial render. In this case, I've chosen new. This should be true.

Then, using Alpine's class binding functionality, you can add :class="{ 'newItem': item.new }" to your row. This will only add the newItem class if the row has been added after the initial render.

Hopefully that makes sense :)

[ahmadabuaysheh]

Thank you so much, I tried your idea and worked as a charm!

[ryangjchandler]

No worries, if you could please close this issue. Thanks!