alpine.js，如何让元素在自己@click 时消失？

Question

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

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

Answer 1

您可以通过多种方式处理此问题，

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

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

Answer 2

这很适合我

<button @click="open = true; event.target.style.display='none';" x-text="'Show more'"></button>

alpine.js，如何让元素在自己@click 时消失？

alpine.js, how to make element disappear on self @click?

onclick

hide

alpine.js