Refreshing data after-the-fact in AlpineJS

Question

I'm using Alpine to display a list of items that will change. But I can't figure out how to tell Alpine to refresh the list of items once a new one comes back from the server:

<div x-data=" items() ">
    <template x-for=" item in items " :key=" item ">
        <div x-text=" item.name "></div>
    </template>
</div>

The first "batch" of items is fine, because they're hard-coded in the items() function:

    function items(){
        return {
            items: [
                { name: 'aaron'  },
                { name: 'becky'  },
                { name: 'claude' },
                { name: 'david'  }
            ]
        };
    }

Some code outside of Alpine fetches and receives a completely new list of items, that I want to display instead of the original set. I can't figure out how, or if it's even currently possible. Thanks for any pointer.

Answer 1

There are 3 ways to solve this.

1. Move the fetch into the Alpine.js context so that it can update this.items

  function items(){
        return {
            items: [
                { name: 'aaron'  },
                { name: 'becky'  },
                { name: 'claude' },
                { name: 'david'  }
            ],
            updateItems() {
              // something, likely using fetch('/your-data-url').then((res) => )
              this.items = newItems;
            }
        };
    }

2. (Not recommended) From your JavaScript code, access rootElement.__x.$data and set __x.$data.items = someValue

<script>
  // some other script on the page
  // using querySelector assumes there's only 1 Alpine component
  document.querySelector('[x-data]').__x.$data.items = [];
</script>

3. Trigger an event from your JavaScript and listen to it from your Alpine.js component.

Update to the Alpine.js component, note x-on:items-load.window="items = $event.detail.items":

<div x-data=" items() " x-on:items-load.window="items = $event.detail.items">
    <template x-for=" item in items " :key=" item ">
        <div x-text=" item.name "></div>
    </template>
</div>

Code to trigger a custom event, you'll need to fill in the payload.

<script>
let event = new CustomEvent("items-load", {
  detail: {
    items: []
  }
});
window.dispatchEvent(event);
</script>