主页 / coding / 问题 / 79420534
Accepted
lonix
Asked: 2025-02-07 18:26:44 +0800 CST

使用 Alpine.js 观察属性变化

  • 772

我有一个 DOM 元素，其属性由外部库（例如 bootstrap）添加/删除。

前：

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

后：

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

我想在添加/删除fooEnabled属性时进行切换。data-foo

这可以通过突变观察器来完成，但我希望使用 alpinejs 也可以（并且更容易）做到这一点。我该怎么做？

javascript

2 个回答

  1. Best Answer

    要清楚，如果属性是通过非 alpinejs 方法添加的，则不可能在不使用 variationsObserver 的情况下不断检查元素是否具有特定属性。

    但是如果 alpinejs 也添加该属性没问题的话，那么就有可能。我不会详细介绍，因为您可能不需要这段代码。

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

    这样，您可以使用 alpinejs 添加属性，并且值也会更新。
    但这不是您要求的功能。

    因此，我的结论是，您不能使用 alpinejs 来检查属性是否存在。这说明您确实需要一个 variationsObserver 来检查属性是否已添加。

    • 2

  2. 是的！您可以在没有 MutationObserver 的情况下，使用 Alpine 内置的 @attr 指令在 Alpine.js 中实现此目的。这允许您在添加或删除 data-foo 属性时被动更新 fooEnabled。

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

    每当 data-foo 属性发生变化时，都会触发 @attr:data-foo.window。在处理程序内部，我们使用 $el.hasAttribute('data-foo') 检查 data-foo 是否存在，然后相应地更新 fooEnabled。

    这是一个干净、简单的 Alpine.js 解决方案，不需要外部 MutationObserver。

    • 0

相关问题