wrong x-data in the x-for!

[njfamirm]

Hi,

First off, thanks for the amazing work on Alpine.js; it's been a great help in my projects.

I've encountered a peculiar issue in my application that seems to stem from Alpine.js, specifically with the x-for directive and x-data attribute not functioning as expected in certain scenarios.

In my application, I'm using x-for to render a list of product information. Each row in this list is supposed to invoke a function defined in x-data for that row. Here's a simplified snippet of my code:

<tbody>
  {% for key, category in productCategory %}
    <template x-for="(orderItem, index) in $store.activeOrderEditor.order.data.itemList.{{ key }}" :key="index">
      <tr class="no-state" x-data="{product: window.productMachine.getProductWithPrice('{{ key }}', orderItem.productId)}" x-init="console.log('Debug', $store.activeOrderEditor.order.data.itemList)">
        <!-- Product information rendering -->
      </tr>
    </template>
  {% endfor %}
</tbody>

The issue I'm facing is that the function I'm using in the x-data of each row doesn't seem to be called correctly at times. This inconsistency leads to duplicate rendering of product information.

Could this be related to how x-for handles the rendering of items, or perhaps how x-data functions are invoked within the loop? Any insights or suggestions on how to address this issue would be greatly appreciated.

Thank you for your time and assistance.

[njfamirm]

I'm confident that the rest of the code is correct because I'm accurately displaying something else using the orderItem data.

[SimoTod]

I suspect the issue is in window.productMachine.getProductWithPrice. Can you paste it?
Key-ing by index, if your list changes overtime, is also a bad idea. The key should be a unique value for your item that doesn't change between renderings

[ekwoka]

yes, you should be keying on orderItem.productId probably.

Since your x-data is only run when that x-for entry is hit, it will refer to the item it was passed at that time.

So if you move stuff, and now the first item is a different item, that x-data would not be changed to reflect the new item (orderItem will update, but not the product).

So add a unique key and it will all be solved :)

[njfamirm]

ok. I'm test it, thanks

[njfamirm]

thanks, that's work fine

[njfamirm]

This fucking mistake cost me at least 1000$ in software 😶‍🌫️

[ekwoka]

?