Added reactivity to Alpine.data component, but it's not working

178 Views Asked by At

I've a simple Alpinejs component named "glide". I'm passing a configuration object, making it reactive with Alpine.reactive:

  Alpine.data('glide', (config = {}) => ({
    glide: null,
    init() {
      this.config = Alpine.reactive(config);
      Alpine.effect(() => {
        console.log('effect', this.config);
      });

      this.glide = new Glide(this.$el, this.config);
      this.glide.mount();
    },
  }));

For some reason the Alpine.effect isn't invoked, but the view reflect the updated config.perView value:

<div x-data="glide({ perView: 1 })">
  <button @click="config.perView++">
    Increase perView (current: <span x-text="config.perView"></span>)
  </button>
</div>

What I'm missing?

0

There are 0 best solutions below