时间戳

首页 > 解决方案 > alpine.js，如何使元素在 self @click 上消失？

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

问题描述

我希望这个元素在点击后自动隐藏。如何以 Alpine 为目标，并将 2 个 @click 事件串在一起？

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

标签： onclickhidealpine.js

解决方案

有多种方法可以处理这个问题，

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

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

推荐阅读