Início / coding / Perguntas / 79420534
Accepted
lonix
Asked: 2025-02-07 18:26:44 +0800 CST

Observe as alterações de atributos usando Alpine.js

  • 772

Tenho um elemento DOM com um atributo que é adicionado/removido por uma biblioteca externa (por exemplo, bootstrap).

Antes:

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

Depois:

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

Gostaria de alternar fooEnabledquando o atributo data-fooé adicionado/removido.

Isso pode ser feito com um observador de mutação, mas espero que seja possível (e mais fácil) usando alpinejs. Como faço isso?

javascript

2 respostas

  1. Best Answer

    Para deixar claro se o atributo é adicionado por um método não alpinejs, não é possível verificar constantemente se o elemento tem um atributo específico sem usar um mutationObserver.

    Mas se não for problema que o alpinejs também adicione o atributo, há uma possibilidade. Não vou entrar em detalhes, pois você provavelmente não precisará desse pedaço de código.

    <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>

    Dessa forma, você pode adicionar o atributo usando alpinejs e o valor também é atualizado.
    Mas essa não é a funcionalidade que você pediu.

    Então, para minha conclusão NÃO, você não pode usar alpinejs para verificar se o atributo está presente. Isso conclui que você precisa de um mutationObserver para verificar se o atributo foi adicionado ou não.

    • 2

  2. Sim! Você pode conseguir isso em Alpine.js sem um MutationObserver usando a diretiva @attr interna do Alpine. Isso permite que você atualize fooEnabled reativamente quando o atributo data-foo é adicionado ou removido.

    <div x-data="{ fooEnabled: false }">
  <button @click="fooEnabled = !fooEnabled; fooEnabled ? $el.setAttribute('data-foo', '123') : $el.removeAttribute('data-foo')">
    Toggle data-foo
  </button>
  <p x-text="fooEnabled ? 'Enabled' : 'Disabled'"></p>
</div>

    @attr:data-foo.window é acionado sempre que o atributo data-foo muda. Dentro do manipulador, verificamos se data-foo existe usando $el.hasAttribute('data-foo'), então atualizamos fooEnabled adequadamente.

    Esta é uma solução Alpine.js limpa e simples, sem a necessidade de um MutationObserver externo.

    • 0

relate perguntas