Set x-data component to false programatically

[shifuma]

I had a slideout that I would like to close after successfully saving something using an HTMX library. Basically, I want to change:

<div x-data="{ slideout: true }" x-cloak> to <div x-data="{ slideout: false }" x-cloak> when the DOM is reloaded. To do that, I feel like I need something like this

{% if success %}
  <script>
    document.addEventListener('alpine:init', () => {
      Alpine.data('slideout', () => ({
        slideout: false,
      }))
    })
  </script>
{% endif %}

I hope what I'm trying to do makes sense. I'm really stuck on the right approach here so would appreciate some help.

[SimoTod]

no, that won't work. Alpine.data is a factory to create data component in a script tag so you can use x-data="slideout" instead of writing everything in your html. It's probably easier if you use Alpine.store.

Is your library reloading the whole page? Because otherwise you won't get an alpine:init event either and usually HTMX doesn't reload the page. Does your library have any hooks you can use?

[shifuma]

Thanks for the reply. So I'm using Craft CMS with Sprig, if that helps. It is only re-rendering a part of the page that I specify. The only docs relevant are these: https://putyourlightson.com/plugins/sprig#javascript

Looking at Alpine.store, that does seem to have potential for my use case.

[shifuma]

My man! That was it...I got it working like this:

<script>
  document.addEventListener('alpine:init', () => {
    Alpine.store('slideout', {
      open: false,
      close() {
        this.open = false;
      }
    });
  });

  function closeSlideout() {
    Alpine.store('slideout').close();
  }
</script>

{% if sprig.isSuccess %}
  <script>
    setTimeout(closeSlideout, 1000);
  </script>
{% endif %}