如何将类添加到 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 属性。