Observe attribute changes

[lonix1]

I have a DOM element with an attribute that is added/removed by an external library (e.g. bootstrap).

Before:

<div x-data="{ fooEnabled: false }">
  ...
</div>

After:

<div x-data="{ fooEnabled: false }" data-foo="123">
  ...
</div>

I'd like to toggle fooEnabled when attribute data-foo is added/removed.

This can be done with a mutation observer, but I'm hoping it's possible (and easier) using alpinejs. How do I do this?

[ekwoka]

With alpine, you'd still use a mutation observer.

Alpine has some helpful methods that might help, I think it's Alpine.onAttributeAdded, but probably easily to slap a mutation observer inside an init. Just observe the same element and toggle the thing.

[lonix1]

Interesting. I found onAttributeAdded but it isn't documented anywhere, so is liable to change without warning.

I'll use your advice and use a mutation observer the normal way. Thanks.

[ekwoka]

Yeah, it could be removed, though I would expect unlikely.