x-for / $state failing without x-data

[kernel-io]

Not sure if this is a bug or just documentation that needs to be clarified, but x-for referencing $store fails to evaluate unless the parent element has an x-data set (even if just defining an empty object).

When you specify x-data on the parent element, x-for will fail if you are referencing a $store that is not set yet (because the store is created after the alpine:init event.

The workaround ends up having to watch the state object and hoist it's state out into the parent elements x-data (however you need to wrap it in a setTimeout for the $store to be defined) 🤦🏿‍♂️ .

some code samples below, id's and classnames stripped for brevity.

Doesn't evaluate the x-for at all

<div>
  <ul>
    <template x-for="notification in $store.notifications.list">

Evaluates the x-for, but throws an error as the store isn't created yet

<div x-data="{}">
  <ul>
    <template x-for="notification in $store.notifications.list">

Works as expected, but seems hacky

<div x-data="{list: []}" x-init="() => {
  setTimeout(() =>
    $watch('$store.notifications.list', () => {
      list = Alpine.store('notifications').list
    })
  , 200)
}">
  <ul>
    <template x-for="notification in list">

Suggestions would be to clarify in the documentation this behaviour, or to make x-for work correctly with $store (i.e: waiting for it to exist)

[danddanddand]

Can you make a codepen? I use x-for with store a lot and have not seen it fail so I suspect something strange is happening and codepen would help to investigate.

[kernel-io]

I can't get anything to work in a codepen / fiddle 😬

[kernel-io]

https://jsfiddle.net/7dfrcosz/18/

this is more or less what I have, but none of it works in jsfiddle...

[MuzafferDede]

This is an expected behavior. Alpine only works on elements which has x-data attribute.

There are few issues in your jsfiddle:

• it is $store not $state
• There should be at least one alpine component wrapping your x-for loop.

Your code should be something like this.

<div id="1" x-data>
  <ul>
    <template x-for="notification in $store.notifications.list">
      <li>
        Message: <span x-text="notification.message"></span>
      </li>
    </template>
  </ul>
</div>

<script>
  document.addEventListener('alpine:init', () => {
    Alpine.store('notifications', {
      list: [{
        message: "happy chocolate berry"
      }, {
        message: "fishcakes supreme"
      }, {
        message: "cheeseburger"
      }]
    })
  })
</script>

Edit: this works for me

[kernel-io]

apologies, I hastily wrote up the example jsfiddle, confusing $state with $store. I am unable to get your example working, that is what I would expect to work, however I am only able to get the following (copy and pasted from my application this time) working.

    <div class="fa-notifications__container"
         x-data="{list: []}"
         x-init="() => setTimeout(() => $watch('$store.notifications.list', () => {list = Alpine.store('notifications').list}),0)">
      <ul class="fa-notifications__list">
        <template x-for="notification in list">

when using your example, I receive no errors, and the x-for does not react to changes in the notifications store.
for further context, this is from a LiveView application.

[MuzafferDede]

I think your issue might be the deffer script.

<div x-data>
  <ul>
    <template x-for="notification in $store.notifications.list">
      <li>
        Message: <span x-text="notification.message"></span>
      </li>
    </template>
  </ul>
</div>

<script defer>
  document.addEventListener('alpine:init', () => {
    Alpine.store('notifications', {
      list: [{
        message: "happy chocolate berry"
      }, {
        message: "fishcakes supreme"
      }, {
        message: "cheeseburger"
      }]
    })
  })
</script>

This should work (my codepen example)