Observe attribute changes using Alpine.js

Question

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?

oelimoe · Accepted Answer · 2025-02-07 13:08:01Z

2

To be clear if the attribute is added by a non alpinejs method, its not possible to constantly check if element has an specific attribute without using a mutationObserver.

But if its no problem that alpinejs also adds the attribute there is an possibility. I wont go into detail since you probably wont need this piece of code.

<div x-data="{ hasAttribute: false }" x-init="() => hasAttribute = $el.hasAttribute('data-example')">
    <button @click="hasAttribute = !hasAttribute">
        Toggle Attribute
    </button>

    <div x-effect="if (hasAttribute) { $el.setAttribute('data-example', 'true'); } else { $el.removeAttribute('data-example'); }">
        <p x-text="hasAttribute ? 'Attribute is present' : 'Attribute is absent'"></p>
    </div>
</div>

In this way you can add the attribute using alpinejs and the value is also updated.
But this is not the functionality that you asked for.

So for my conclusion NO you can not use alpinejs to check if attribute is present. This concludes that you do need a mutationObserver to check if attribute is added or not.

answered Feb 7 at 13:08

oelimoe

4453 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lonix Feb 7 at 13:56

I was hoping alpinejs could handle a mutation observer on my behalf, but I guess not. Thanks for confirming.

lonix Feb 7 at 13:57

By the way, I don't think the x-effect is necessary, the example works without it.

oelimoe Feb 10 at 8:07

@lonix the x-effect is an event listener on the values it holds that is hasAttribute and when that value changes it executes the code within which is an attribute setter/remover

Collectives™ on Stack Overflow

Observe attribute changes using Alpine.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related