如何将类添加到 AlpineJS 元素之外的元素

Question

我有一个简单的问题，但它让我疯狂地想锻炼。我正在使用 AlpineJS 来显示和隐藏内容。通常在 alpine 中，按钮和内容会在同一个元素中，但在这里我把它放在它的外面。这行得通。但是当内容打开或关闭时，我无法将类添加到按钮和内容 div。

谁能指导一下。

<!-- button -->
<div class="mt-4" x-data="{id: 1}">
    <button 
    @click="$dispatch('open-dropdown',{id})" 
    type="button" 
    class="bg-white hover:bg-gray-50"
    :class="{ 'bg-green-400': open, 'bg-gray-200': !(open) }">
        I'm the button
    </button>
</div>

<!-- popup 1 -->
<div x-data="{ open: false }" 
x-show="open" 
@open-dropdown.window="if ($event.detail.id == 1) open = true" 
@click.away="open = false">
    <div
    class="bg-white hover:bg-gray-50"
    :class="{ 'bg-green-400': open, 'bg-gray-200': !(open) }">
        I'm the content
    </div>
</div>

Answer 1

为此，您可以将 open 状态移动到页面上所有组件都可以访问的全局 Alpine.js' $store 对象中。

<!-- button -->
<div class="mt-4" x-data="{id: 1}">
  <button @click="$dispatch('open-dropdown',{id})"
          type="button"
          class="bg-white hover:bg-gray-50"
          :class="{ 'bg-green-400': $store.open, 'bg-gray-200': !($store.open) }">
      I'm the button
  </button>
</div>

<!-- popup 1 -->
<div x-data
     x-show="$store.open"
     @open-dropdown.window="if ($event.detail.id == 1) $store.open = true"
     @click.away="$store.open = false">
  <div class="bg-white hover:bg-gray-50"
        :class="{ 'bg-green-400': $store.open, 'bg-gray-200': !($store.open) }">
    I'm the content
  </div>
</div>

<script>
document.addEventListener('alpine:init', () => {
  Alpine.store('open', false)
})
</script>

由于我们在商店中的 open 状态是一个简单的值，我们可以将每个 open 替换为 $store.open。请注意，popup 1 组件仍然需要一个空的 x-data 属性。

如何将类添加到 AlpineJS 元素之外的元素

How to add classes to an element outside of AlpineJS element

javascript

alpine.js

alpinejs

如何将 类 添加到 AlpineJS 元素之外的元素

How to add classes to an element outside of AlpineJS element

javascript

alpine.js

alpinejs

如何将类添加到 AlpineJS 元素之外的元素