alpine.js，如何使元素在 self @click 上消失？

问题描述

我希望这个元素在点击后自动隐藏。我如何使用 Alpine 定位自己，并将 2 个 @click 事件串在一起？

<div @click="tagify.addTags(['hardware'])">hardware</div>

解决方法

有多种方法可以解决这个问题，

您可以像在 event.target 中一样通过 method 1 定位 self，其他方法只是隐藏元素的替代方法。

方法 1 - 在点击处理程序中设置内联样式

<div @click="tagify.addTags(['hardware']); event.target.style.display='none';">hardware</div>

方法 2 - 使用 x-ref

<div x-ref="hardware" @click="tagify.addTags(['hardware']); $refs.hardware.style.display='none';">hardware</div>

方法 3 - 将 x-show 与变量一起使用

<div x-data="{showHardware : true}">
    ....
    <div x-show="showHardware" @click="tagify.addTags(['hardware']); showHardware = false">hardware</div>
</div>