AlpineJS @click.away 没有 hide/remove 元素

Question

我是 Alpine 的新手，我想知道为什么我的 @click.away 不起作用。它应该 hide/remove 页面的下拉菜单。

Answer 1

事件侦听器不应作为 it's not a valid event target.

注册到 HTML template 标记

改为将其添加到 ul 标签。

<ul 
@click.away="isProfileMenuOpen = false"
x-transition:leave="transition ease-in duration-150" 
x-transition:leave-start="opacity-100" 
x-transition:leave-end="opacity-0" 
class="absolute right-0 w-48 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:border-gray-700 dark:text-gray-300 dark:bg-gray-700" 
aria-label="submenu"
>
<!-- ... -->
</ul>

AlpineJS @click.away 没有 hide/remove 元素

AlpineJS @click.away does not hide/remove the element

javascript

alpine.js